利用面向对象写的购物车，本地存储，添加删除，功能都能实现
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> * { padding: 0; margin: 0; text-decoration: none; } body { background: #EA4335; } .main { width: 800px; margin: auto; margin-top: 20px; } .top { background: #fff; padding: 10px; } .ipt { width: 230px; height: 32px; line-height: 32px; border: 1px solid #ccc; outline: none; } .btn { height: 34px; width: 120px; border: none; } .cart { background: #fff; margin-top: 20px; padding: 10px; } .cart .tr { height: 35px; } .cart .tr div { float: left; line-height: 35px; } .cart .tr { padding: 5px 0px; border-bottom: 1px solid #ccc; } .cart .tr { clear: both; } .cart .tr div:nth-child(1) { width: 20%; } .cart .tr div:nth-child(2) { width: 20%; } .cart .tr div:nth-child(3) { width: 20%; } .cart .tr div:nth-child(4) { width: 30%; } .cart .tr div:nth-child(5) { width: 10%; } .cart .tr input { width: 50px; } .footer { background: #fff; margin-top: 20px; padding: 10px; } #amount { color: red; } </style> <script type="text/javascript"> window.addEventListener('load', function () { class Cart { goods = [ // { // id: 1, // title: '手机', // price: 2000, // num: 1, // checked: false // }, // { // id: 2, // title: '平板', // price: 2000, // num: 1, // checked: false // }, // { // id: 3, // title: '电脑', // price: 2000, // num: 1, // checked: false // }, // { // id: 4, // title: '手表', // price: 2000, // num: 1, // checked: false // } ]; goodsNode = document.getElementById('goods'); //商品列表dom addCart = document.getElementById('addCart'); //添加事件中的按钮dom selectAll = document.getElementById('selectAll'); //全选 countNode = document.getElementById('count') //获取商品数量 amountNode = document.getElementById('amount') //获取商品价格 delall = document.getElementById('delall'); //清空购物车 constructor() { if (localStorage.getItem("goods")) { this.goods = JSON.parse(localStorage.getItem("goods")); } this.render(); this.addEvent(); } //绑定监听事件 addEvent() { var _this = this; //this交出去给里面的事件函数用 this.addCart.addEventListener('click', function () { var title = document.getElementById('title').value; var price = document.getElementById('price').value; _this.addGoods({ title: title, price: price }); //传操作的对操作的方法里 _this.iptClear(); }); //注册删除事件 this.goodsNode.addEventListener('click', function (e) { if (e.target.name == "del") { var id = e.target.parentNode.parentNode.id; _this.delGoods(id); } //单击选中事件 if (e.target.name == "ckboxs") { var id = e.target.parentNode.parentNode.id; _this.upDateGoods(id, 'checked', e.target.checked); //更改当前id的checked状态 _this.isSelectAll(); //更改全选按钮的状态 } //+的事件 if (e.target.name == "+" || e.target.name == "-") { var id = e.target.parentNode.parentNode.id; _this.ChangeNum(e.target.name, id); } }); //全选所有的复选框 this.selectAll.addEventListener('click', function () { _this.selectAllGoods(this.checked); }) this.delall.addEventListener("click", function () { _this.goods = []; //重新渲染数据到页面上 _this.render(); }) } //添加数据 addGoods(obj) { //判断输入框是否为空，若为空不加数据 if (!(title.value == "" || price.value == "")) { //随机一个id obj.id = new Date().getTime() + Math.floor(Math.random() * 10).toString(); obj.num = 1; obj.checked = false; //默认不选中 this.goods.push(obj); //重新渲染数据到页面上 this.render(); } } //删除数据 delGoods(id) { //删除事件 for (var i = 0; i < this.goods.length; i++) { if (this.goods[i].id == id) { //找到此元素删除 this.goods.splice(i, 1); } } //重新渲染数据到页面上 this.render(); } //更新数据 upDateGoods(id, k, v) { for (var i = 0; i < this.goods.length; i++) { if (this.goods[i].id == id) { //找到此元素修改 this.goods[i][k] = v; } } //重新渲染数据到页面上 this.render(); } //全选按钮 selectAllGoods(checked) { for (var i = 0; i < this.goods.length; i++) { this.goods[i].checked = checked; } //重新渲染数据到页面上 this.render(); } //是否全选 isSelectAll() { //控制全选按钮的状态 var flag = true; for (var i = 0; i < this.goods.length; i++) { if (this.goods[i].checked == false) { flag = false; } } this.selectAll.checked = flag; } //改变num的数量 ChangeNum(type, id) { for (var i = 0; i < this.goods.length; i++) { if (this.goods[i].id == id) { if (type == "+") { this.goods[i].num++; } else { this.goods[i].num--; this.goods[i].num = this.goods[i].num > 0 ? this.goods[i].num : 1; } } } //重新渲染数据到页面上 this.render(); } //点击加入购物车按钮清空输入框内容 iptClear() { document.getElementById('title').value = ""; document.getElementById('price').value = ""; } //渲染数据到页面上 render() { var str = ''; for (var i = 0; i < this.goods.length; i++) { str = str + "<div class=\"tr\" id=\"" + this.goods[i].id + "\">" str = str + "<div><input type=\"checkbox\" name=\"ckboxs\" value=\" " + this.goods[i].id + " \" " + (this.goods[i].checked ? "checked" : "") + "></div>" str = str + "<div>" + this.goods[i].title + "</div>" str = str + "<div>" + this.goods[i].price + "元</div>" str = str + "<div><a href=\"javascript:;\" name=\"-\">-</a> <input type=\"text\" value=\"" + this .goods[i].num + "\" readonly=\"\"> <a href=\"javascript:;\" name=\"+\">+</a></div><div><a href=\"javascript:;\" name=\"del\">删除</a></div>" str = str + "</div>" } this.goodsNode.innerHTML = str; this.ChangeFooter(); localStorage.setItem("goods", JSON.stringify(this.goods)); //本地存储 } //更改商品的数量和价格 ChangeFooter() { var sum = 0; for (var i = 0; i < this.goods.length; i++) { //如果选中则显示选中的个数，若不选中则为0 if (this.goods[i].checked) { sum = sum + this.goods[i].num; } else { this.countNode.innerHTML = 0; } this.countNode.innerHTML = sum; } var amount = 0; for (var i = 0; i < this.goods.length; i++) { if (this.goods[i].checked) { amount = amount + this.goods[i].num * this.goods[i].price; } } this.amountNode.innerText = amount; } } var C1 = new Cart(); // C1.render(); // C1.addEvent(); }) </script> </head> <body> <div class="main"> <div class="top"> 商品名称：<input type="text" name="" value="" id="title" class="ipt" /> 商品价格：<input type="text" name="" value="" id="price" class="ipt" /> <input type="button" value="加入购物车" class="btn" id="addCart" /> </div> <div class="cart"> <div class="tr"> <div><input type="checkbox" name="" value="" id="selectAll" /> 全选按钮</div> <div>商品名称</div> <div>商品价格</div> <div>数量</div> <div>操作</div> </div> <div id="goods"></div> </div> <div class="footer"> 选中<span id="count">0</span>件商品,共计 <span id="amount">0</span> 元 <a href="javascript:;" class="r" id="delall">清空购物车</a> </div> </div> </body> </html>
