js实现简单的购物车有图有代码

article/2025/10/17 18:24:56

用JavaScript实现静态购物车功能

要求：
点击+号数量增加，点击-号数量递减；
实现全选、反选和删除功能；
求出小计、总数量和总价；

看效果图
在这里插入图片描述

CSS样式

<style>table{width: 900px;border-collapse: collapse;margin: 0 auto;}th{      border-top: 3px solid #a7cbff;background: #e2f2ff;text-align: center;}td{height: 80px;border: 1px solid #CADEFF;text-align: center;color: rgb(167, 159, 159);font-size: 14px;}tr:hover{background-color:#e2f2ff;}.count-input{width: 50px;text-align: center;height: 21px;}#foot td{height: 30px;}.reduce{position: relative;left: 5px;bottom: 2px;}.add{position: relative;right: 5px;bottom: 2px;}.reduce,.add{display: inline-block;width: 20px;height: 25px;background-color: #ccc;color: white;cursor: pointer;}span{cursor: pointer;}#allPrice{display: inline-block;width: 50px;}tfoot tr td{text-align: left;}</style>

body部分

    <table><thead><tr><th><input type="checkbox" id="ckAll" onclick="checkAll()">全选</th><th>商品</th><th>单价</th><th>数量</th><th>小计</th><th>操作</th></tr></thead><tbody><tr class="inline"><td><input type="checkbox" name="ck" onclick="check()"></td><td>Casio/卡西欧 EX-TR350</td><td>5999.88</td><td><span class="reduce" onclick="reduceCount(this)">-</span><input type="text" value="1" class="count-input"><span class="add" onclick="addCount(this)">+</span></td><td>5999.88</td><td><span class="delete" onclick="del(this)">删除</span></td></tr><tr class="inline"><td><input type="checkbox" name="ck" onclick="check()"></td><td>Canon/佳能 PowerShot SX50 HS</td><td>3888.50</td><td><span class="reduce" onclick="reduceCount(this)">-</span><input type="text" value="1" class="count-input"><span class="add" onclick="addCount(this)">+</span></td><td>3888.50</td><td><span class="delete" onclick="del(this)">删除</span></td></tr><tr class="inline"><td><input type="checkbox" name="ck" onclick="check()"></td><td>Sony/索尼 DSC-WX300</td><td>1428.50</td><td><span class="reduce" onclick="reduceCount(this)">-</span><input type="text" value="1" class="count-input"><span class="add" onclick="addCount(this)">+</span></td><td>1428.50</td><td><span class="delete" onclick="del(this)">删除</span></td></tr><tr class="inline"><td><input type="checkbox" name="ck" onclick="check()"></td><td>Fujifilm/富士 instax mini 25</td><td>640.60</td><td><span class="reduce" onclick="reduceCount(this)">-</span><input type="text" value="1" class="count-input"><span class="add" onclick="addCount(this)">+</span></td><td>640.60</td><td><span class="delete" onclick="del(this)">删除</span></td></tr></tbody>  <tfoot id="foot"><tr><td></td><td></td><td></td><td></td><td>总数：<span id="allCount"></span></td><td>总价：<span id="allPrice"></span></td></tr></tfoot></table>

script部分

<script>//获取元素var ckAll = document.getElementById('ckAll');var cks = document.getElementsByName('ck');var trs = document.getElementsByClassName('inline');var allCount = document.getElementById('allCount');var allPrice = document.getElementById('allPrice');var countInput = document.getElementsByClassName('count-input');//计算总数function sumCount(){var sum = 0;for(var i=0;i<cks.length;i++){if(cks[i].checked == true){var num = Number(countInput[i].value);sum += num;}}allCount.innerHTML = sum;}//计算总价function sumPrice(){var sum = 0;for(var i=0;i<cks.length;i++){if(cks[i].checked == true){var p = Number(trs[i].children[4].innerHTML);sum += p;}}allPrice.innerHTML = sum.toFixed(2);}//计算每一行的总价function inlinePrice(){for(var i=0;i<trs.length;i++){//获取每一行单价var price = Number(trs[i].children[2].innerHTML);//获取数量var num = Number(trs[i].children[3].children[1].value);//小计trs[i].children[4].innerHTML = (price * num).toFixed(2);}}//数量增加function addCount(e){// 获取input标签里的value值,数量var num =parseInt(e.previousElementSibling.value) ;//数量加1e.previousElementSibling.value = num+1;inlinePrice();sumPrice();sumCount();}//数量递减function reduceCount(e){var num = parseInt(e.nextElementSibling.value);if(num <= 0){alert("不能再减了");return;}e.nextElementSibling.value = num-1;inlinePrice();sumPrice();sumCount();}//全选和反选function checkAll(){for(var i=0;i<cks.length;i++){cks[i].checked = ckAll.checked;}sumPrice();sumCount();}//复选框的交互function check(){// 判断四个小的复选框有没有没被选中的,如果有一个,就把ckAllde的checked 变为falsefor(var i=0;i<cks.length;i++){if(cks[i].checked == false){ckAll.checked = false;sumPrice();sumCount();// 有一个小复选框为false,就不需要对其他复选框进行判断了,直接中止函数下面的执行语句return;}}//循环结束后,如果小复选框checked的值都为true,ckAll的checked的值就为trueckAll.checked = true;sumPrice();sumCount();}//单行删除function del(e){e.parentElement.parentElement.remove();sumPrice();sumCount();}</script>