js 实现完整版淘宝购物车 |
您所在的位置：网站首页 › HTML5设计网页添加购物车功能 › js 实现完整版淘宝购物车 |
|
功能分析：
1、实现单选和全选 2、实现商品数量的加减和输入，小计金额和总件数也跟着发生改变，以及判断是否选中 3、实现选中商品金额总计 4、 可以删除商品，删除商品后的总件数以及已选择件数，和总金额的改变 5、可以加入购物车，加入购物车后的总件数的改变，以及拥有相应的功能 1、HTML相关代码 小米购物车,打死不改 全选 商品名称 单价 数量 小计 操作 继续购物 共3 件商品，已选择 0件 合计：0元 请勾选需要结算的商品 去结算 买购物车中商品的人还买了 2、css样式代码 * { margin: 0; padding: 0; } a { text-decoration: none; } tr, td { box-sizing: border-box; } body { background-color: #f5f5f5; } .center { width: 1226px; margin: 0 auto; padding-top: 50px; margin-top: 100px; background-color: #fff; border-top: 2px solid #ff6700; } table { border-collapse: collapse; } .c { width: 110px; } .simg { width: 120px; } .icon-succ { display: inline-block; width: 18px; height: 18px; line-height: 18px; border: 1px solid #e0e0e0; margin-left: 24px; margin-right: 20px; background-color: #fff; color: #fff; font-size: 16px; text-align: center; vertical-align: middle; position: relative; top: -1px; cursor: pointer; } /* 悬停 */ .icon-succ:hover { color: #757575; } table .tb .btn { background-color: #ff6700; color: #fff; } .thead { width: 1226px; height: 70px; color: #424242; font-size: 16px; } .thead tr { height: 70px; } .shopName { width: 380px; } .number { text-align: center; width: 150px; } .price { text-align: center; width: 158px; } .count { text-align: center; width: 201px; box-sizing: border-box; } .op { text-align: center; width: 80px; } /* tr边框 */ .tlist { padding: 15px 26px 15px 0; border-top: 1px solid #e0e0e0; height: 117px; box-sizing: border-box; } /*计数框 */ .nu { border: 1px solid #e0e0e0; height: 38px; width: 100%; display: flex; text-align: center; justify-content: space-between; position: relative; } .nu .msg { position: absolute; width: 100%; left: 0; bottom: -24px; font-size: 12px; color: #b0b0b0; display: none; } /* 加减 */ .nu span { font-size: 12px; width: 40px; height: 38px; font-weight: bold; display: inline-block; line-height: 40px; } .nu span:hover { background-color: #e0e0ee; transition: all 0.3s; } .numbers { margin-right: 40px; } /* */ .shopNumber { width: 72px; height: 38px; line-height: 38px; padding: 0; border-width: 0; color: #424242; font-size: 16px; outline: none; text-align: center; } .clear::after { content: ""; display: block; clear: both; } /* 文字说明 */ .titles { font-size: 18px; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } /* 删除 */ .ic { color: #ff6700; } .icon-X- { width: 24px; height: 24px; display: inline-block; line-height: 24px; border-radius: 12px; font-size: 12px; font-weight: bold; color: #757575; transition: all 0.3s; } .icon-X-:hover { color: #fff; background-color: #e53935; } /* 购物选项 */ .crta { width: 1226px; height: 50px; margin: 0 auto; text-align: center; display: flex; background-color: #fff; justify-content: space-between; align-items: center; font-size: 14px; color: #757575; margin-top: 30px; } i { font-style: normal; } .c-left { height: 50px; font-size: 14px; color: #757575; text-align: center; display: flex; align-items: center; } /* 继续购物 */ .c-left .back-shopping { height: 16px; margin-left: 32px; width: 56px; transition: color 0.3s; display: inline-block; font-size: 14px; color: #757575; } /* 悬停变色 */ .c-left .back-shopping:hover { color: #ff6700; } .cart-total { margin-left: 16px; padding-left: 16px; border-left: 1px solid #eee; color: #757575; display: inline-block; box-sizing: border-box; } .cart-total i { color: #ff6700; } /* 合计 */ .total-price { height: 50px; color: #ff6700; position: relative; } .total-price em { font-style: normal; font-size: 30px; } .total-price span { text-align: right; display: inline-block; } .total-price .close { width: 200px; height: 48px; display: inline-block; line-height: 48px; font-size: 18px; margin-left: 50px; vertical-align: top; } .btn-disabled { background: #e0e0e0; border-color: #e0e0e0; color: #b0b0b0; cursor: default; } .total-price .btn-close { padding-left: 13px; color: #ff6700; background: #ff6700; border-color: #ff6700; color: #fff; } /* 勾选 */ .noTip { width: 200px; height: 48px; line-height: 48px; position: absolute; top: -58px; right: 0; background-color: #fff; border: 1px solid #ff6700; color: #ff6700; text-align: center; } .noTip::before { content: ""; bottom: -8px; margin-left: -10px; border-width: 8px 10px 0; border-color: #ff6700 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0); z-index: 1; display: block; width: 0px; height: 0px; border-style: solid dashed dashed; position: absolute; left: 50%; } .noTip::after { content: ""; bottom: -7px; margin-left: -8px; border-width: 7px 8px 0; border-color: #fff rgba(0, 0, 0, 0) rgba(0, 0, 0, 0); z-index: 2; display: block; width: 0px; height: 0px; border-style: solid dashed dashed; position: absolute; left: 50%; } /* 还买了模块 */ .content { width: 1226px; margin: 0 auto; text-align: center; margin-top: 60px; } .shoptitle { position: relative; margin: 0; height: 50px; font-size: 30px; font-weight: 400; color: #757575; border-top: 1px solid #e0e0e0; } .title { position: absolute; top: -20px; left: 372px; height: 40px; width: 482px; line-height: 40px; text-align: center; display: block; background-color: #f5f5f5; } /* 商品列表 */ .shop-all { width: 1226px; height: 628px; } .shopitem { float: left; width: 234px; height: 300px; padding: 0 20px; margin: 0 0 14px 14px; padding: 0; position: relative; overflow: hidden; list-style: none; background-color: #fff; text-align: center; color: #757575; } /* 商品列表 */ .shopitem img { display: block; margin: 40px auto 20px; width: 140px; height: 140px; } .shopList { margin: 0 0 0 -14px; height: 628px; } .shop-name { margin: 0 10px 10px; height: 18px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; color: #333; } .shop-price { margin-bottom: 10px; color: #ff6700; } .shop-tips { color: #757575; font-size: 14px; } .action { width: 118px; border: 1px solid #ff6700; background: #fff; color: #ff6700; height: 28px; position: absolute; left: 50%; height: 28px; font-size: 12px; line-height: 28px; margin-left: -64px; bottom: -40px; transition: all .3s; } .shopitem:hover .action { bottom: 15px; } .action:hover { background-color: #ff6700; color: #fff; }3、js相关代码 window.onload = function() { // 获取tbody节点 var tbody = document.querySelector(".tb"); // 总价 var em = document.querySelector(".total-price em"); var gnumber = document.querySelector(".g-number"); // 总数量 var cNumber = document.querySelector(".c-number"); // 获取结算按钮 var close = document.querySelector(".close"); // 件数 var ja; // 勾选 var noTip = document.querySelector(".noTip"); // 自动生成商品 var arr = [{ img: "https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1560222640.90428593.jpg?thumb=1&w=80&h=80", titles: "小米「小爱老师」 4G网络尊享版 白色", price: "999元", count: "999元" }, { img: "https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1543561468.82116708.jpg?thumb=1&w=80&h=80", titles: "小黑鲨游戏 Type-C 耳机 黑色", price: "99元", count: "99元" }, { img: "https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1464615180.86261317.jpg?thumb=1&w=80&h=80", titles: "米兔智能故事机 白色", price: "199元", count: "199元" }, ] var strs = ""; for (var i = 0; i < arr.length; i++) { var imgsrc = arr[i].img; var titles = arr[i].titles; var itemprice = arr[i].price; var count = arr[i].count; strs += ` ${titles} ${itemprice} ${count} ` } tbody.innerHTML += strs; // 全选按钮 var all = document.querySelector(".all"); //给tobdy添加点击事件，委托 tbody.onclick = function(event) { var event = event || window.event; var target = event.target || event.srcElement; // 小计价格 if ( target.className == "iconfont icon-jianhao" || target.className == "iconfont icon-hao" ) { var numa = target.parentNode; // 还可以购买 var msg = numa.querySelector(".msg"); ja = parseInt(numa.children[1].value); if (target.className == "iconfont icon-jianhao") { ja = ja - 1; } else if (target.className == "iconfont icon-hao") { ja = ja + 1; } if (ja == 0) { alert("修改数量不能小于1") ja = 1; } else if (ja == 1) { msg.style.display = "none"; } else if (ja > 1 && ja < 10) { msg.style.display = "block"; msg.innerHTML = "还可以购买10件以上"; } else if (ja >= 10 && ja < 20) { msg.style.display = "block"; msg.innerHTML = "还可以购买" + (20 - ja) + "件"; } else if (ja == 20) { msg.style.display = "none"; } else if (ja > 20) { alert("商品加入购物车数量超过限制") ja = 20; } numa.children[1].value = ja; p(numa, ja); money(); number(); } //输入件数 if (target.className == "shopNumber") { target.onblur = function() { var numa = target.parentNode; // 还可以购买 var msg = numa.querySelector(".msg"); var ja = target.value; if (ja == 0) { alert("修改数量不能小于1") ja = 1; } else if (ja == 1) { msg.style.display = "none"; } else if (ja > 1 && ja < 10) { msg.style.display = "block"; msg.innerHTML = "还可以购买10件以上"; } else if (ja >= 10 && ja < 20) { msg.style.display = "block"; msg.innerHTML = "还可以购买" + (20 - ja) + "件"; } else if (ja == 20) { msg.style.display = "none"; } else if (ja > 20) { alert("商品加入购物车数量超过限制") ja = 20; msg.style.display = "none"; } else { alert("请输入数字") ja = 1; } p(numa, ja) money(); } } // 删除商品 if (target.className == "iconfont icon-X-") { var flag = confirm("是否确定删除商品？"); if (flag) { target.parentNode.parentNode.remove(); // 判断移除之后的总价，和已选数量 money(); number(); var itemBtns = tbody.querySelectorAll(".item"); console.log(itemBtns); for (var i = 0; i < itemBtns.length; i++) { if (itemBtns[i].className == "iconfont icon-succ item") { all.className = "iconfont icon-succ all"; break; } all.className = "iconfont icon-succ all btn"; } } } // 全选判断 if ( target.className == "iconfont icon-succ all" || target.className == "iconfont icon-succ all btn" ) { var itemBtns = tbody.querySelectorAll(".item"); // 全选 if (target.className == "iconfont icon-succ all") { target.className += " btn"; // 结算 close.className += " btn-close"; for (var i = 0; i < itemBtns.length; i++) { itemBtns[i].className = "iconfont icon-succ item btn"; } // 已选数量，总价 money(); } //取消全选 else if (target.className == "iconfont icon-succ all btn") { target.className = "iconfont icon-succ all"; // 结算 close.className = "close btn-disabled"; // 已选数量 gnumber.innerHTML = 0; // 总价 em.innerHTML = 0; // 勾选提示 noTip.style.display = "block"; for (var i = 0; i < itemBtns.length; i++) { itemBtns[i].className = "iconfont icon-succ item"; } } } // 单选判断 if ( target.className == "iconfont icon-succ item" || target.className == "iconfont icon-succ item btn" ) { var itemBtns = tbody.querySelectorAll(".item"); // 单选 if (target.className == "iconfont icon-succ item") { target.className += " btn"; close.className += " btn-close"; // 单选判断全选 for (var i = 0; i < itemBtns.length; i++) { if (itemBtns[i].className == "iconfont icon-succ item") { all.className = "iconfont icon-succ all"; break; } all.className = "iconfont icon-succ all btn"; } } else if (target.className == "iconfont icon-succ item btn") { target.className = "iconfont icon-succ item"; // 取消全选 all.className = "iconfont icon-succ all"; if (snumber == 0) { // 结算按钮背景 close.className = "close btn-disabled"; } } // 总价和已选商品 money(); } }; // 小计 function p(num, n) { // 数量 num.querySelector(".shopNumber").value = n; // 获取单价 price = parseInt( parseFloat(num.parentNode.parentNode.querySelector(".price").innerHTML) * 10 ); // 小计价格 var ic = num.parentNode.parentNode.querySelector(".ic"); ic.innerHTML = n * price / 10 + "元"; } // 总价 var moneys = 0; // 已选数量 var j = 0; var snumber = 0; function money() { var itemBtns = document.querySelectorAll(".c span"); for (var i = 0; i < itemBtns.length; i++) { if (itemBtns[i].className == "iconfont icon-succ item btn") { // 获取小计价格 countVlue = parseInt( parseFloat(itemBtns[i].parentNode.parentNode.querySelector(".count") .innerHTML) * 10 ); moneys += countVlue; j = parseInt( itemBtns[i].parentNode.parentNode.querySelector(".shopNumber") .value ); snumber = snumber + j; } } // 总价 em.innerHTML = moneys / 10; // 已选择数量 gnumber.innerHTML = snumber; if (snumber > 0) { noTip.style.display = "none"; } else { noTip.style.display = "block"; } moneys = 0; snumber = 0; } // 总量 var cnumber = 0; var c = 0; function number() { var itemBtns = document.querySelectorAll(".c span"); for (var i = 0; i < itemBtns.length; i++) { c = parseInt( itemBtns[i].parentNode.parentNode.querySelector(".shopNumber") .value ); cnumber += c; } cNumber.innerHTML = cnumber; cnumber = 0; } var shopList = document.querySelector(".shopList") var arrshop = [{ imgSrc: "https://cdn.cnbj0.fds.api.mi-img.com/b2c-miapp-a1/b474f7bb-10e1-ee92-f78f-d87231b0726a.jpg?thumb=1&w=180&h=180", shopName: "小米AI音箱", shopPrice: "199元", shopTips: "117.8万人好评", }, { imgSrc: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/413f38dda38c199d422a6ff453234ad4.jpg?thumb=1&w=180&h=180&f=webp&q=90", shopName: "米家声波电动牙刷T100", shopPrice: "39.9元", shopTips: "177万人好评", }, { imgSrc: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d71b2748efea2b150b00bb1f30d8cf99.jpg?thumb=1&w=180&h=180&f=webp&q=90", shopName: "MIJOY 小魔爪按摩器", shopPrice: "9.9元", shopTips: "18.6万人好评", }, { imgSrc: "https://i8.mifile.cn/b2c-mimall-media/64de04b0cb774f0b33ed4a00df0f9c3c!180x180.jpg", shopName: "手机USB micro 数据线", shopPrice: "19.9元", shopTips: "57.8万人好评", }, { imgSrc: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/32febc8b4df89cda9019aab1643b7eb8.jpg?thumb=1&w=180&h=180&f=webp&q=90", shopName: "米家插电夜灯", shopPrice: "39.9元", shopTips: "7.8万人好评", }, { imgSrc: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/4b762a0c59fd01f5c4068c61a9da56e7.jpg?thumb=1&w=180&h=180&f=webp&q=90", shopName: "小米中性笔", shopPrice: "24.9元", shopTips: "13.8万人好评", }, { imgSrc: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/cccefe4c39329ec01b587d114f64eab5.jpg?thumb=1&w=180&h=180&f=webp&q=90", shopName: "米家智能压力IH电饭煲1S 3L", shopPrice: "849元", shopTips: "1.8万人好评", }, { imgSrc: "https://cdn.cnbj0.fds.api.mi-img.com/b2c-miapp-a1/b474f7bb-10e1-ee92-f78f-d87231b0726a.jpg?thumb=1&w=180&h=180", shopName: "米家自动洗手机套装", shopPrice: "69元", shopTips: "41.8万人好评", }, { imgSrc: "https://cdn.cnbj0.fds.api.mi-img.com/b2c-miapp-a1/T1bXKjBQAT1RXrhCrK.jpg?thumb=1&w=180&h=180", shopName: "7号彩虹电池（10粒）", shopPrice: "199元", shopTips: "203.8万人好评", }, { imgSrc: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f9f3e968c9390f44a589afa48e92c6eb.jpg?thumb=1&w=180&h=180&f=webp&q=90", shopName: "贝医生防蛀健齿牙膏", shopPrice: "12.9元", shopTips: "56.8万人好评好评", }, ] var str = ""; for (var i = 0; i < arrshop.length; i++) { var imgSrc = arrshop[i].imgSrc; var shopName = arrshop[i].shopName; var shopPrice = arrshop[i].shopPrice; var shopTips = arrshop[i].shopTips; str += ` ${shopName} ${shopPrice} ${shopTips} 加入购物车 ` } // 添加事件 // 事件委托 shopList.innerHTML = str; shopList.onclick = function(event) { var event = event || window.event; var target = event.target || event.srcElement; if (target.className == "action") { // 获取li var shopitem = target.parentNode; // 获取商品名 var shopName = shopitem.querySelector(".shop-name").innerHTML; // 价格 var shopPric = shopitem.querySelector(".shop-price").innerHTML; // 获取图片 var img = shopitem.querySelector("img").src; var tr = document.createElement("tr"); tr.className = "tlist"; tr.innerHTML = ' ' + shopName + ' ' + shopPric + '还可买 10 件以上 < /div>' + shopPric + ' '; tbody.insertBefore(tr, tbody.children[1]); } number(); } // 结算点击 close.onmousedown = function() { if (close.className == "close btn-disabled") { close.style.boxShadow = "2px -2px 4px rgba(0, 0, 0, .3)"; } else { var fl = confirm("是否确定购买？"); } } close.onmouseup = function() { if (close.className == "close btn-disabled") { close.style.boxShadow = ""; } } }
|
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |