实现效果:
1、添加、减少商品数量，总价随之改变；
2、点击删除，删除所选的商品；
3、点击关闭，关闭当前页面。
实现的效果图:
以下就是使用代码:
CSS:
#imgs {width: 100px;height: 150px;}.box {width: 800px;height: 500px;border: 1px solid gray;margin: 0 auto;}#clo {float: right;background-color: red;}#settlement {float: right;background-color: red;}
HTML:
<div class="box"><img src="./images/dd_logo.jpg" alt=""><button id="clo">关闭</button><table border="0" cellspacing="0" cellpadding="10"><thead><tr><th>商品图片</th><th>商品信息</th><th>单价</th><th>数量</th><th>总价</th><th>操作</th></tr></thead><tbody><tr><td><img id="imgs" src="./images/dog.jpg" alt=""></td><td>我和狗狗活了下来</td><td>￥21.90</td><td><button class="active">-</button><input type="text" value="1"><button class="active">+</button></td><td>21.90</td><td><button class="del">移入收藏<br>删除</button></td></tr><tr><td><img id="imgs" src="./images/mai.jpg" alt=""></td><td>灰霾来了怎么办</td><td>￥24.00</td><td><button class="active">-</button><input type="text" value="1"><button class="active">+</button></td><td>24.00</td><td><button class="del">移入收藏<br>删除</button></td></tr></tbody><tfoot><tr><td colspan="6">总价：<button id="sum">结算</button></td></tr></tfoot></div>
JS:
//获取所有加减buttonvar _buttons = document.querySelectorAll(".active");_buttons.forEach(function(btn) {btn.onclick = function() {//实际参数cal(this, this.innerText);}})//单个tr的小计// tag：点击的按钮// params:加号或减号function cal(tag, params) {//数量var num = tag.parentNode.children[1].value * 1;//改变数量num = eval(num + params + 1);if (num < 0) {alert("当前数量已经为0!");return;}//从新放入inputtag.parentNode.children[1].value = num;//单价var unitPrice = tag.parentNode.previousElementSibling.innerText;unitPrice = unitPrice.slice(1);//总计var total = num * unitPrice;total = total.toFixed(2); //保留两位小数tag.parentNode.nextElementSibling.innerText = total;//重新计算总计sum();}//总计var _dels = document.querySelectorAll("tbody .del");var _sum = document.querySelector("#sum");function sum() {var _trs = document.querySelectorAll("tbody tr");var sum = 0; //总计Array.from(_trs).forEach(function(tag) {console.log(tag.children[4]);//获取小计var tal = tag.children[4].innerText * 1;sum += tal;})_sum.innerText = sum;}_dels.forEach(function(tag) {tag.onclick = function() {if (confirm("确认删除吗")) {tag.parentNode.parentNode.remove();}sum();}})
