JavaScript 实现购物车

您所在的位置：网站首页 › java用书名号把书放入购物车 › JavaScript 实现购物车

JavaScript 实现购物车

2023-09-17 17:25| 来源: 网络整理| 查看: 265

主要功能：

（1）点击全选按钮，所有商品都会被选中或取消选中，且小计、商品总数和总价同步变化。

（2）点击加号按钮或减号按钮，可以增加或减少商品的数量，且小计、商品总数和总价同步变化。

（3）点击删除按钮，可以删除商品，且总商品数和总价同步变化。

（4）增加或减少商品的数量时，该商品会自动被选中。

完整代码：

Document * { margin: 0; padding: 0; } .column { float: left; } .cart-head { width: 988px; height: 32px; line-height: 32px; background: #f3f3f3; padding: 5px 0; border: 1px solid #e9e9e9; border-top: 0; font-size: 12px; margin-bottom: 1px; } .checkbox { width: 122px; height: 18px; line-height: 18px; padding-left: 11px; padding-top: 7px; } .checkAll { margin-right: 5px; vertical-align: text-bottom; } .goods { width: 208px; } .props { width: 140px; height: 32px; padding: 0 10px 0 20px; } .price { width: 120px; padding-right: 50px; text-align: right; } .quantity { width: 80px; text-align: center; } .sum { width: 100px; padding-right: 40px; text-align: right; } .action { width: 75px; } .cart-foot { position: relative; width: 988px; height: 50px; border: 1px solid #f0f0f0; font-size: 12px; } .cart-foot .left { float: left; width: 363px; height: 50px; } .select-all { float: left; width: 49px; height: 50px; line-height: 50px; padding-left: 9px; } .select-all .checkAll { margin: 5px 3px 0 0; vertical-align: text-bottom; } .operation { float: left; width: 305px; height: 50px; line-height: 50px; } .operation a { float: left; margin-left: 10px; color: #666; text-decoration: none; } .cart-foot .right { /* position: absolute; top: 0; right: 0; */ float: left; width: 625px; height: 50px; } .price-sum { float: right; width: 220px; height: 50px; line-height: 50px; color: #999; } .totalAmount { padding: 0 3px; } .total { color: #e22312; font-size: 16px; font-weight: 700; } .btn-area { float: right; width: 95px; height: 50px; line-height: 50px; text-align: center; background-color: #e22312; font-size: 18px; font-weight: 700; } .btn-area a { color: #fff; text-decoration: none; } .item { width: 988px; height: 119px; line-height: 119px; border-top: 1px solid #f0f0f0; font-size: 12px; } .checkUnit { width: 115px; height: 119px; padding-left: 13px; } .white { width: 95px; height: 119px; } .shop { width: 380px; height: 119px; } .shop img { margin-top: 15px; border: 1px solid rgba(204, 204, 204, 0.548); float: left; } .shop .desc { float: left; width: 190px; height: 119px; line-height: 30px; padding-top: 15px; padding-left: 20px; } .count button { width: 23px; height: 20px; border: 1px solid #cbcbcb; background-color: #fff; } .count input { width: 30px; height: 20px; outline: none; text-align: center; border: 1px solid #cbcbcb; box-sizing: border-box; } .unitPrice { width: 90px; height: 119px; } .count { width: 140px; height: 119px; } .subtotal { width: 72px; height: 119px; } .handle { width: 83px; height: 119px; } .handle a { display: block; line-height: 55px; color: #808080; text-decoration: none; } .bg { background-color: rgba(233, 158, 19, 0.226); } 全选商品单价数量小计操作全选删除选中的商品移入关注清理购物车去结算已选择0件商品总价：￥ var data = [ { "name": "你不知道的JavaScript 上卷+中卷+下卷（套装共3册京东）(图灵出品)", "src": "./img/book1.jpg", "price": "181.30" }, { "name": "JavaScript高级程序设计第4版(图灵出品）", "src": "./img/book2.jpg", "price": "106.70" }, { "name": "JavaScript 指南原书第7版犀牛书JS高级程序设计", "src": "./img/book3.jpg", "price": "119.90" } ]; var cartBody = document.querySelector(".cart-body"); var totalQuantity = 0; //商品总数 renderData(); //渲染数据 function renderData() { var str = ""; for (var i = 0; i < data.length; i++) { str += "" + "

" + data[i].name + "" + "" + "￥" + data[i].price + "" + "-+" + "￥" + data[i].price + "" + "删除移入关注"; } cartBody.innerHTML = str; } var checkAlls = document.getElementsByClassName('checkAll'); //获取所有全选框 var checkItems = document.getElementsByClassName('checkItem'); var items = document.getElementsByClassName('item'); var amounts = document.getElementsByClassName('amount'); var totalAmount = document.querySelector('.totalAmount'); var total = document.querySelector('.total'); var totalPrice = 0; total.innerText = totalPrice.toFixed(2); //全选功能 for (var i = 0; i < checkAlls.length; i++) { checkAlls[i].index = i; checkAlls[i].addEventListener('click', function () { totalQuantity = 0; changeStatus(this.checked); checkAlls[this.index == 0 ? 1 : 0].checked = this.checked; getTotal(); }) } function changeStatus(status) { for (var i = 0; i < checkItems.length; i++) { checkItems[i].checked = status; if (status) { items[i].classList.add('bg'); totalQuantity += parseInt(amounts[i].value); } else { items[i].classList.remove('bg'); } } totalAmount.innerText = totalQuantity; } //减少商品数量功能 var leftbtns = document.getElementsByClassName('leftbtn'); for (var i = 0; i < leftbtns.length; i++) { leftbtns[i].index = i; leftbtns[i].addEventListener('click', function () { var amount = amounts[this.index].value; if (amount == 1) { return; } else { amount--; } amounts[this.index].value = amount; if (!checkItems[this.index].checked) { checkItems[this.index].checked = true; items[this.index].classList.add('bg'); } getSubtotal(this.index); getGoodsNum(); getTotal(); }) } //增加商品数量功能 var rightbtns = document.getElementsByClassName('rightbtn'); for (var i = 0; i < rightbtns.length; i++) { rightbtns[i].index = i; rightbtns[i].addEventListener('click', function () { var amount = amounts[this.index].value; amount++; amounts[this.index].value = amount; if (!checkItems[this.index].checked) { checkItems[this.index].checked = true; items[this.index].classList.add('bg'); } getSubtotal(this.index); getGoodsNum(); getTotal(); }) } //计算小计 var perPrice = document.getElementsByClassName('perPrice'); var smallPrice = document.getElementsByClassName('smallPrice'); function getSubtotal(index) { var Price = parseInt(amounts[index].value) * perPrice[index].innerText; smallPrice[index].innerText = Price.toFixed(2); } //计算商品总数 function getGoodsNum() { var flag = false; totalQuantity = 0; for (var i = 0; i < checkItems.length; i++) { if (checkItems[i].checked) { totalQuantity += parseInt(amounts[i].value); flag = true; } } if (!flag) { for (var i = 0; i < checkAlls.length; i++) { checkAlls[i].checked = false; } } totalAmount.innerText = totalQuantity; } //选择或取消单个商品 for (var i = 0; i < checkItems.length; i++) { checkItems[i].index = i; checkItems[i].addEventListener('click', function () { if (this.checked) { items[this.index].classList.add('bg'); } else { items[this.index].classList.remove('bg'); } getGoodsNum(); getTotal(); }) } //计算总价 function getTotal() { totalPrice = 0; for (var i = 0; i < checkItems.length; i++) { if (checkItems[i].checked) { totalPrice += parseFloat(smallPrice[i].innerText); } } total.innerText = totalPrice.toFixed(2); } //删除单件商品（模拟） var deletebtns = document.getElementsByClassName('delete'); for (var i = 0; i < deletebtns.length; i++) { deletebtns[i].index = i; deletebtns[i].addEventListener('click', function () { items[this.index].remove(); //更新元素的索引 for (var i = 0; i < items.length; i++) { deletebtns[i].index = i; leftbtns[i].index = i; rightbtns[i].index = i; checkItems[i].index = i; } getGoodsNum(); getTotal(); }) }

效果图：

默认状态：

全选：

改变商品的数量：

删除商品：

【本文地址】

JavaScript 实现购物车

JavaScript 实现购物车

今日新闻

推荐新闻