京东购物车
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <style> *{ margin: 0px; padding: 0px; } .box{ width: 1000px; margin: 50px auto; } .header ul, .content ul{ display: flex; justify-content: space-around; align-items: center; list-style: none; border-bottom: 1px dashed #666; padding-bottom: 20px; } .content ul{ padding-left: 10px; } .content ul li img{ width: 150px; height: 120px; } .content ul li button{ padding: 2px 5px; } .footer{ margin-top: 20px; } .footer ul{ list-style: none; display: flex; justify-content: space-around; margin-bottom: 15px; border-bottom: 1px dashed #666; padding-bottom: 20px; } .footer ul li{ width: 150px; height: 215px; text-align: center; border: 1px solid #000; } .footer ul li img{ width: 150px; height: 120px; } .footer ul li p{ margin: 5px 0px; } .footer button{ padding: 2px 5px; } </style> <body> <div class="box"> <div class="header"> <ul> <li> <input type="checkbox" name="selectAll"> 全选 </li> <li>商品图片</li> <li>数量</li> <li>单价</li> <li>商品名称</li> <li>小计</li> <li>操作</li> </ul> </div> <div class="content"> <ul> <li> <input type="checkbox" name="selectOne"> </li> <li> <img src="../7/img/1.jpg" alt=""> </li> <li> <button>-</button> <button>1</button> <button>+</button> </li> <li> ￥<span>2500.00</span> </li> <li>卡西欧相机</li> <li>￥<span>2500.00</span></li> <li> <button>删除</button> </li> </ul> <ul> <li> <input type="checkbox" name="selectOne"> </li> <li> <img src="../7/img/2.jpg" alt=""> </li> <li> <button>-</button> <button>1</button> <button>+</button> </li> <li> ￥<span>2800.00</span> </li> <li>卡西欧相机</li> <li>￥<span>2800.00</span></li> <li> <button>删除</button> </li> </ul> <ul> <li> <input type="checkbox" name="selectOne"> </li> <li> <img src="../7/img/3.jpg" alt=""> </li> <li> <button>-</button> <button>1</button> <button>+</button> </li> <li> ￥<span>3300.00</span> </li> <li>索尼相机</li> <li>￥<span>3300.00</span></li> <li> <button>删除</button> </li> </ul> </div> <div class="footer"> <ul> <li> <img src="../7/img/4.jpg" alt=""> <h4>迷你相机</h4> <p>￥<span>3000.00</span></p> <button>加入购物车</button> </li> <li> <img src="../7/img/5.jpg" alt=""> <h4>初级相机</h4> <p>￥<span>3800.00</span></p> <button>加入购物车</button> </li> <li> <img src="../7/img/6.jpg" alt=""> <h4>中级相机</h4> <p>￥<span>5000.00</span></p> <button>加入购物车</button> </li> <li> <img src="../7/img/7.jpg" alt=""> <h4>高级相机</h4> <p>￥<span>10000.00</span></p> <button>加入购物车</button> </li> </ul> <button>全删</button> <!-- <button>增加</button> --> 店铺合计：￥ <span>0.00</span> 已选商品总计：￥ <span>0.00</span> </div> </div> </body> <script src="../7/js/utils.js"></script> <script> //获取操作对象 var bigBox = document.querySelector('.box'); var selectAlls = document.querySelector('[name="selectAll"]'); // getelmentsByName():获取页面中name属性值为"selectOne"的所有元素，返回一个伪数组 var selectOnes = document.getElementsByName('selectOne'); var content = document.querySelector('.content'); //给大盒子添加点击事件 bigBox.onclick = function() { // 兼容写法 var e = e || window.event //获取操作目标 var tg = e.target || e.srcElement //全选 if(tg.name === "selectAll") { //遍历所有单选框 for(var i=0;i<selectOnes.length;i++) { //判断全选是否被选中 if(tg.checked) { selectOnes[i].checked = true } else { selectOnes[i].checked = false } } total2() } //单选 if(tg.name === "selectOne") { radio() total2() } // 增加一行 if(tg.innerHTML === "加入购物车") { console.log(121) // 获取当前商品中的信息 // 获取当前按钮对象的父节点li中所有子节点对象 var list = tg.parentNode.children //图片地址 var imgurl = list[0].getAttribute('src') //商品名称 var name1 = list[1].innerHTML // 商品价格 var price1 = list[2].innerHTML //创建ul var newul = document.createElement('ul') //添加内容 newul.innerHTML = ` <li> <input type="checkbox" name="selectOne"> </li> <li> <img src="${imgurl}" alt=""> </li> <li> <button>-</button> <button>1</button> <button>+</button> </li> <li> ${price1} </li> <li>${name1}</li> <li>${price1}</li> <li> <button>删除</button> </li> ` // 将创建好的ul插入内容区域 content.appendChild(newul) radio() //调用函数 total1() total2() } //删除一行 if(tg.innerHTML === "删除") { tg.parentNode.parentNode.remove() radio() total1() total2() } //全删 if(tg.innerHTML === "全删") { // 遍历所有选中框对象 for(var i=0;i<selectOnes.length;i++) { //判断是否被选中 if(selectOnes[i].checked) { selectOnes[i].parentNode.parentNode.remove() // 让下标自减 - 因为没删一个下标就往前走一位 i-- } } radio() total1() total2() } //添加数量 if(tg.innerHTML === "+") { //获取到前面的标签 - 上一个兄弟节点 数量 var num = tg.previousElementSibling.innerHTML //让数量自增 num++ // 将数量重新赋值给当前位置 tg.previousElementSibling.innerHTML = num //获取单价 - 没选一件商品给单价累加 //位置在+按钮的父节点的下一个兄弟节点最后的子元素 var price = tg.parentNode.nextElementSibling.lastElementChild.innerHTML //计算小计 - 数量乘于单价即是商品总价格 var sum = num * parseFloat(price) //把计算的小计结果赋值给小计 tg.parentNode.parentNode.children[5].lastElementChild.innerHTML = sum.toFixed(2)//让小计保留两位小数 total1() total2() } //减少数量 if(tg.innerHTML === "-") { //获取到后面的标签 - 下一个兄弟节点 数量 var num = tg.nextElementSibling.innerHTML //判断限制最小值和最大值 if(num<=1) { //如果数量只有一件则等于1 num = 1 } else { // 否则数量自减 num-- } // 将数量重新赋值给当前位置的数量 tg.nextElementSibling.innerHTML = num //获取单价 - 没选一件商品给单价累加 //位置在+按钮的父节点的下一个兄弟节点最后的子元素 var price = tg.parentNode.nextElementSibling.lastElementChild.innerHTML //计算小计 - 数量乘于单价即是商品总价格 var sum = num * parseFloat(price) //把计算的小计结果赋值给小计 tg.parentNode.parentNode.children[5].lastElementChild.innerHTML = sum.toFixed(2)//让小计保留两位小数 } total1() total2() } // 单选事件 function radio() { //方法一 // for(var i=0;i<selectOnes.length;i++) { // //给所有单选框添加点击事件 // selectOnes[i].onclick = function() { // //判断单选是否所有框都被选中 - 设置全选 // var arr = [].slice.call(selectOnes, 0)//将伪数组转换为数组才能使用数组方法 // //es6新增数组方法 - 判断所有元素是否满足条件 // var bool = arr.every(v => v.checked) // selectAlls.checked = bool // } // } // 方法二 //计数器 var k = 0 //遍历所有单选框 for(var i=0;i<selectOnes.length;i++) { // 判断当前选中框是否被选中 if(selectOnes[i].checked) { k++ } } // 判断选中框被选中的次数是否等于单选框的长度 if(k === selectOnes.length) { selectAlls.checked = true } else { selectAlls.checked = false } } // 获取底部操作对象 var footer = document.querySelector('.footer'); //店铺合计事件 function total1() { //获取所有商品 一个ul代表一个商品 var uls = content.children //内容区域的所有子元素即为商品 //统计商品总计 var sum = 0 // 遍历所有商品 for(var i=0;i<uls.length;i++) { //获取小计 - 位置在ul第五个子元素的最后一个子元素 var price = uls[i].children[5].lastElementChild.innerHTML //累计求和 sum += parseFloat(price) } //将商品合计给店铺合计赋值 footer.querySelectorAll('.footer>span')[0].innerHTML = sum } total1() //函数调用 //已选商品事件 function total2() { //获取所有商品 var uls = content.children //统计 var sum2 = 0 // 遍历每个商品 for(var i=0;i<uls.length;i++) { //获取当前商品选中框 var input1 = uls[i].children[0].lastElementChild //判断当前选中框是否被选中 if(input1.checked) { //获取小计 var price = uls[i].children[5].lastElementChild.innerHTML //累计求和 sum2+= parseFloat(price) } } //将商品合计给店铺合计赋值 footer.querySelectorAll('.footer>span')[1].innerHTML = sum2 } //函数调用 total2() </script> </html>
效果：
浙公网安备 33010602011771号