css代码* {margin: 0;padding: 0;}button,input {/* "\5B8B\4F53" 就是宋体的意思 这样浏览器兼容性比较好 */font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;/* 默认有灰色边框我们需要手动去掉 *//* border: 0; *//* 边框点击 蓝色外框效果去掉 */outline: none;}a {text-decoration: none;color: black;}tr,td,th {border-bottom: 1px dashed #666;}.container {width: 1200px;margin: 100px auto;}.container table {width: 100%;text-align: center;}.container tr {line-height: 40px;}.container tr .inp>input:nth-child(even) {width: 50px;text-align: center;}.container tr .inp>input:nth-child(odd) {width: 20px;}.container .total-price {text-align: right;padding-right: 40px;}.container .total-price span {color: red;font-size: 18px;}
html部分<div class="container"><img src="image/dd_logo.jpg" alt=""><table><tr><th width='150px'>商品图片</th><th width='150px'>商品信息</th><th width='100px'>单价</th><th width='100px'>数量</th><th width='100px'>总价</th> <!-- 限定宽度 防止价格变化抖动 --><th width='100px'>操作</th></tr><tr><td><img src='image/shoppingBg_03.jpg'></td><td>我和狗狗活下来了</td><td>￥28.90</td><td class="inp"><input type="button" value="-" name="minus" disabled /><input type="text" value="0" name="amount" /><inputtype="button" value="+" name="plus" /></td><td class="all-price">￥0</td><td><a href="#">移入收藏</a> <br><a class="delete" href="#">删除</a></td></tr><tr><td><img src='image/shoppingBg_06.jpg'></td><td>灰霾来了怎么办</td><td>￥16.69</td><td class="inp"><input type="button" value="-" name="minus" disabled /><input type="text" value="0" name="amount" /><inputtype="button" value="+" name="plus" /></td><td class="all-price">￥0</td><td><a href="#">移入收藏</a> <br><a class="delete" href="#">删除</a></td></tr></table><div class="total-price">商品总价:<span>￥0</span>
js部分/*有加减button和数量输入框,点击减号按钮，对应数量输入框值减一，点击加号按钮，对应数量输入框值加一，1. 获取所有加按钮，循环给每个加按钮绑定点击事件*/// 设置加号事件function onPlus() {var plusEles = document.querySelectorAll('input[name="plus"]')for (var i = 0; i < plusEles.length; i++) {// 点击加号的绑定事件plusEles[i].onclick = function () {//设置上一个兄弟元素节点的属性var amountEles = this.previousElementSibling //获取数量元素amountEles.value++//给加号消除禁用var minus = amountEles.previousElementSiblingminus.removeAttribute('disabled')//计算价格// 1 获取单价var priceEle = this.parentElement.previousElementSibling //获取单价元素var price = priceEle.innerHTML //获取 单价元素里面的￥28.90 price = price.substring(1) //对索引为1的字符串开始进行截取，截取后仍然是字符串类型price = Number(price) //字符串转数值// console.log(price);//2. 获取数量// var amountEles = this.previousElementSibling // 这句话可以不用写了，上面写了，如果上面没写 要写这句话、var num = amountEles.value //获取num=数量值// 3.计算总价var totalPrice = price * numtotalPrice = totalPrice.toFixed(2)// console.log(totalPrice); //调试用// 4.显示总价到对应位置 var totalPices = this.parentElement.nextElementSibling //获取单价栏元素 名字设为totalPices// totalPices.innerHTML = '￥'+totalPrice // 字符串拼接 法一totalPices.innerHTML = `￥${totalPrice}` // 模板字符串拼接 法二// 计算商品总价var goodsTotalPrice = getSum() // 调用回调函数var goodsTotal = document.querySelector('.total-price span') //获取span价格模块goodsTotal.innerHTML = `￥${goodsTotalPrice}` //向span模块添加内容：调用函数的sum}}}onPlus()// 设置减号事件function onMinus() {var minusEles = document.querySelectorAll('input[name="minus"]')for (var i = 0; i < minusEles.length; i++) {// 点击减号的绑定事件minusEles[i].onclick = function () {//设置下一个兄弟元素节点的属性var amountEles = this.nextElementSiblingamountEles.value--if (amountEles.value == 0) {this.setAttribute('disabled', true) //设置禁用}//计算价格// 1 获取单价var priceEle = this.parentElement.previousElementSibling //获取单价元素var price = priceEle.innerHTML //获取 单价元素里面的￥28.90 price = price.substring(1) //对索引为1的字符串开始进行截取，截取后仍然是字符串类型price = Number(price) //字符串转数值//2. 获取数量// var amountEles = this.nextElementSibling // 这句话可以不用写了，上面写了，如果上面没写 要写这句话、var num = amountEles.value //获取num=数量值// 3.计算总价var totalPrice = price * numtotalPrice = totalPrice.toFixed(2)// console.log(totalPrice); //调试用// 4.显示总价到对应位置 var totalPices = this.parentElement.nextElementSibling //获取单价栏元素 名字设为totalPices// totalPices.innerHTML = '￥'+totalPrice // 字符串拼接 法一totalPices.innerHTML = `￥${totalPrice}` // 模板字符串拼接 法二// 计算商品总价var goodsTotalPrice = getSum() // 调用回调函数var goodsTotal = document.querySelector('.total-price span') //获取span价格模块goodsTotal.innerHTML = `￥${goodsTotalPrice}` //向span模块添加内容：调用函数的sum}}}onMinus()/*** 计算所有商品总价*/function getSum() {var sum = 0var goodsTotalPriceEle = document.querySelectorAll('.all-price') //获取每个商品的总价格 定义名字为goodsTotalPriceElefor (var i = 0; i < goodsTotalPriceEle.length; i++) {var price = goodsTotalPriceEle[i].innerHTMLprice = price.substring(1) //截取价格，截取后仍是字符串// price = Number(price) //字符串转数值sum += Number(price) //累加}return sum.toFixed(2) //回调函数}//删除var deleteEles = document.querySelectorAll('.delete') //获取deleteElesfor (var i = 0; i < deleteEles.length; i++) {deleteEles[i].onclick = function () {this.parentElement.parentElement.remove() //删除tr 节点.remove()}}
实现效果：
简介：当当网购物车1.0版本，实现简单的增减数量功能，计算单个商品总价和所有商品总价使用的关键知识点：js部分：DOM节点，DOM动态操作节点，获取元素，操作元素绑定事件，this关键字
