JS商品足迹案例代码

步骤：
1.点击li标签，生成历史记录1.1 为li标签，添加点击事件。1.2 获取点击的这个li标签中的商品信息。1.3 声明一个数组，把商品信息放入数组中。1.4 把数组转json字符串，放入localStorage中。2.历史记录中商品不能重复。如果点击过，把原来的删掉，新的添加到后面。3.历史记录最多三条。添加第四条的时候，把第一条删除.3.1添加之前先判断长度，历史记录的长度==3的时候，把第一条删除3.2 再添加新的一条。4.打开页面，显示之前的历史记录。4.1 写一个方法 4.2 从历史记录中获取商品信息数组。4.3 遍历数组，将拼接好的字符串传入到footprint区域中。

html如下：

<body><img src="img/Snipaste_2021-01-20_10-18-01.png" alt=""><ul class="item-list"> </ul><h1>历史记录</h1><ul class="item-list footprint"></ul><script src="js/data.js"></script><script src="js/demo.js"></script>
</body>

data.js 如下：

var dataList = [{id:1,imgSrc: "img/1.webp",title: "SUSISUMMER篙定水波纹羊绒精工直筒裁剪POLO领松紧抽褶短大衣女",afterCoupon: "4280.00",oldPrice: "¥4280.00",sellerInfo: "SUSISUMMER",sellInfo: "月销 20"
}, {id:2,imgSrc: "img/2.webp",title: "ONLY2021春季新款减龄娃娃领收腰显瘦小黑裙连衣裙女",afterCoupon: "899.00",oldPrice: "¥899.00",sellerInfo: "SUSISUMMER",sellInfo: "月销 493"
}, {id:3,imgSrc: "img/3.webp",title: "复古连衣裙高端洋气方领拼接通勤纯色高腰长袖长裙女装单件春季",afterCoupon: "158.00",oldPrice: "¥198.00",sellerInfo: "精品时尚靓装",sellInfo: "月销 2"
}, {id:4,imgSrc: "img/4.webp",title: "2020年秋冬新款复古港风格子法式V领连衣裙女长款韩版格子西装裙",afterCoupon: "168.00",oldPrice: "¥198.00",sellerInfo: "探匠女装",sellInfo: "月销 1"
}, {id:5,imgSrc: 'img/5.webp',title: 'hego收腰小黑裙显瘦气质裙子女神范蕾丝高端大牌名媛黑色连衣裙秋',afterCoupon: '¥595.00',oldPrice: '¥595.00',sellerInfo: 'hego旗舰店',sellInfo: '月销 57'
}]

JS代码如下：

var itemList = document.querySelector(".item-list");
const footprint = document.querySelector(".footprint");
function createHTML(data) {var str = "";for (var i = 0; i < data.length; i++) {str += `<li class="item"><a class="item-a" href="#"><img class="item-img" src="${data[i].imgSrc}"><div class="item-title"><span class="title-text">${data[i].title}</span></div><div class="price-con"><span class="price-title">¥</span><span class="price-afterCoupon">${data[i].afterCoupon}</span><span class="price-old">${data[i].oldPrice}</span></div><div class="seller-info">${data[i].sellerInfo}</div><div class="item-footer"><div class="sell-info">${data[i].sellInfo}</div></div></a></li>`}return str;
}
itemList.innerHTML = createHTML(dataList);// 1.获取所有的商品的li标签。
const items = itemList.querySelectorAll("li");
// 2.绑定点击事件
for (let index = 0; index < items.length; index++) {items[index].onclick = function () {// 3.获取商品信息const obj = dataList[index];// 6.放入之前，应该先去获取，如果有，追加，没有是新增。let historyArr = JSON.parse(localStorage.getItem("footHistory"));if (!historyArr) {//声明一个数组，把商品信息放入数组中。historyArr = [];}// 添加之前，先看看原来的数据中包不包含这个商品if (historyArr.length>0) {for (let index = 0; index < historyArr.length; index++) {const element = historyArr[index];if (element.id == obj.id) {historyArr.splice(index,1);break;}}}// 添加之前，再判断历史记录的长度是否超过3个。if (historyArr.length >= 3) {// 删除第一个historyArr.shift();}historyArr.push(obj);localStorage.setItem("footHistory", JSON.stringify(historyArr));getHistory();}
}
function getHistory(){// 取出本地数据let arr = JSON.parse(localStorage.getItem("footHistory"));// 拼接字符串放入历史记录里。footprint.innerHTML = createHTML(arr);
}
getHistory();

效果图如下：

JS商品足迹案例代码相关推荐

公众号菜单代码 php,如何使用Vue.js实现微信公众号菜单编辑器（案例代码）
这次给大家带来如何使用Vue.js实现微信公众号菜单编辑器(案例代码),使用Vue.js实现微信公众号菜单编辑器的注意事项有哪些,下面就是实战案例,一起来看一下. 实现菜单删除方法在vue实例中添加 ...
js利用本地储存开获取商品足迹
js利用本地储存开获取商品足迹步骤 1.在点击li时,产生一条历史访问记录1.1获取所有的商品的li标签.1.2获取商品详情1.3 将这条记录放入到localStorage中, 数组[] 转json ...
js复制图片文字图文分享到微信/QQ，插件clipboard.js的应用案例
js复制图片-文字,可用于商品复制文案进行分享的功能~ 1.此案例应用到clipboard.js,具体使用可查阅文档: 2.这个框架功能还是比较强大的,复制文本和图片,复制成功后的html的标签会被去 ...
Vue 知识点汇总（下）--附案例代码及项目地址
文章目录 Vue 预备知识与后续知识及项目案例一.简介 1.Vue (读音 /vjuː/,类似于 view)的简单认识 2.Vue.js安装二.Vue知识量化三.内容 1.Webpack 详解 ...
Vue实战之商品购物车案例
学习Vue框架有一段时间了,所以找了个案例练练手,借此来巩固所学知识以及如何将其运用在实际生活场景,学以致用不就是这个意思嘛<_<.好了,废话不多说,切入正题. 该案例是利用Vue的计算属 ...
jQuery 内容文本值|| 案例：购物车案例模块-增减商品数量 || 案例：购物车案例模块-修改商品小计
jQuery 内容文本值 <!DOCTYPE html> <html lang="en"><head><meta charset=&quo ...
Kettle转换作业50个案例代码
Kettle转换作业应用脚本本文是Kettle转换作业微案例相关的脚本(代码)及注释的说明.本项目旨在技术交流与学习,由于本人能力有限,代码中难免有些错误,欢迎留言.私信反馈给我,希望对你有所帮助. ...
seo黑帽劫持用的php,黑帽seo 论坛:黑帽seo防止网站被k的js劫持跳转代码
由于目前百度搜索百度搜索引擎对于js代码还没有办法完全辨别,因此也就出现了运用js代码跳转的黑帽优化提升手法.现如今在网络上有关js跳转代码不计其数,但是作为黑帽优化提升的seo手法之一,如何确保有效 ...
js获取图片真实尺寸 - 代码篇
js获取图片真实尺寸 - 代码篇代码案例: <!DOCTYPE html> <html> <head> <meta charset="UTF-8& ...

JS商品足迹案例代码

JS商品足迹案例代码相关推荐

最新文章

热门文章