2. it
  3. 用原生JavaScript做一个简单的购物车

用原生JavaScript做一个简单的购物车

mac2024-04-05  29

用原生JavaScript做一个简单的购物车

前言：

本文由简易HTML+CSS+JavaScript构成，本文图片可自己修改。

（img内容不上传）

实现功能：

将商品添加到购物车（如果购物车有相同物品则累加对应数量）小计计算与总和积分计算与总和实现数量的增加和减少（并同步小计和积分及其总和）单个商品删除批量删除

实现效果：

HTML部分：

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div> <div id="shop"> <ul> <li> <a href="#" onclick="addToCart(this);"> <img src="img/a.jpg" height="100" width="100"/><br /> <span class="price">4999.00</span>¥<br /> 添加至购物车 </a> </li> <li> <a href="#" onclick="addToCart(this);"> <img src="img/b.jpg" height="100" width="100"/><br /> <span class="price">1999.00</span>¥<br /> 添加至购物车 </a> </li> <li> <a href="#" onclick="addToCart(this);"> <img src="img/c.jpg" height="100" width="100"/><br /> <span class="price">3999.00</span>¥<br /> 添加至购物车 </a> </li> <li> <a href="#" onclick="addToCart(this);"> <img src="img/d.jpg" height="100" width="100"/><br /> <span class="price">999.00</span>¥<br /> 添加至购物车 </a> </li> <li> <a href="#" onclick="addToCart(this);"> <img src="img/e.jpg" height="100" width="100"/><br /> <span class="price">5666.00</span>¥<br /> 添加至购物车 </a> </li> </ul> </div> <div id="info-table"> <h1>购物车</h1> <table id="mytable" width="1200" align="center"> <tr> <th><input type="checkbox" id="allCheck" onclick="selectAll()"/>全选</th> <th>店铺宝贝</th> <th>获积分</th> <th>单价(元)</th> <th>数量</th> <th>小计(元)</th> <th>操作</th> </tr> <tr> <td><input type="checkbox" class="selectOne" /></td> <td class="imgbackground"><img src="img/a.jpg" height="100" width="100"/></td> <td class="integral">249</td> <td>4999.00</td> <td> <button onclick="reduce(this)">-</button> <input type="text" size="1" readonly="true" value="1"/> <button onclick="plus(this)">+</button> </td> <td class="shopCount">0</td> <td><a href="#" class="delete" onclick="deleteChild(this)">删除</a></td> </tr> </table> </div> <div id="info-input"> <div class="total-div"> <span>商品总价(不含运费)：<span id="resultTotalMoney">0</span>元</span> </div> <div class="btorinter-div"> <button onclick="selectDelete()" class="btdelete">删除所选</button> <span class="viewIntegral">可获积分：<span id="integralTotal">0</span>点</span> </div> <div> <button class="btbuy" onclick="buyNow()">立即购买</button> </div> </div> </div> </body> </html>

CSS部分：

#info-table{text-align: center;} #info-input{width: 1200px;margin: 0px auto;} #info-input>div{ width: 1200px; margin: 20px 0px; } .shopCount{color: orange;} a{text-decoration: none;color: deepskyblue;} #resultTotalMoney,#integralTotal{color: orange;} .total-div{text-align: right;} .btdelete{float: left;} .btorinter-div{height: auto;overflow: auto;} .viewIntegral{float: right;} .btbuy{background-color: orange;color: white;border: 0px;float: right;} #shop{ width: 800px;margin: 0px auto; height: auto; overflow: auto; } #shop li{ text-align: center; list-style: none; float: left; height: auto; overflow: auto; margin: 20px; } #shop a{ display: block; height: auto; overflow: auto; } .price{color: red;}

JavaScript部分：

<script type="text/javascript"> // 全选 function selectAll(){ var obj = document.getElementsByClassName("selectOne"); var btSelectAll = document.getElementById("allCheck").checked; for(inputCheck of obj){ inputCheck.checked = btSelectAll; } } // 单个删除 function deleteChild(obj){ var nowtr = obj.parentElement.parentElement; var nowtable = nowtr.parentElement; nowtable.removeChild(nowtr); // 总价 allShopPriceTotal(); // 总积分 allIntegralTotal(); } // 批量删除 function selectDelete(){ var obj = document.getElementsByClassName("selectOne"); for (var i = obj.length - 1;i >= 0;i--){ var nowCheck = obj[i]; if (nowCheck.checked == true){ deleteChild(nowCheck); } } // 总价 allShopPriceTotal(); // 总积分 allIntegralTotal(); } // 减少数量 function reduce(obj){ var textElement = obj.parentElement.children[1]; if (textElement.value == "1"){ return; } textElement.value = eval(textElement.value + "-1"); // 小计 var singelSumElement = obj.parentElement.parentElement.children[5]; singleSubTotal(singelSumElement); // 总价 allShopPriceTotal(); // 总积分 allIntegralTotal(); } // 增加数量 function plus(obj){ var textElement = obj.parentElement.children[1]; textElement.value = eval(textElement.value + "+1"); // 小计 var singelSumElement = obj.parentElement.parentElement.children[5]; singleSubTotal(singelSumElement); // 总价 allShopPriceTotal(); // 总积分 allIntegralTotal(); } // 初始化全部商品小计 function singleAllSubTotal(){ var obj = document.getElementsByClassName("shopCount"); for(shopCount of obj){ singleSubTotal(shopCount); } } // 计算单个商品的小计 function singleSubTotal(obj){ var price = obj.parentElement.children[3].innerHTML; var count = obj.parentElement.children[4].children[1].value; obj.innerHTML = eval(price + "*" + count); } // 所有商品的总价钱 function allShopPriceTotal(){ var obj = document.getElementById("resultTotalMoney"); var allSingelSubElement = document.getElementsByClassName("shopCount"); var sum = "0"; for (singelSubElement of allSingelSubElement){ if (sum != ""){ sum += "+"; } sum += singelSubElement.innerHTML; } obj.innerHTML = eval(sum); } // 可得积分总和 function allIntegralTotal(){ // 总积分 var obj = document.getElementById("integralTotal"); // 单个积分 var allSingelIntegralElement = document.getElementsByClassName("integral"); // 计算集 var sum = "0"; for (singelIntegralElement of allSingelIntegralElement){ // 数量 var count = singelIntegralElement.parentElement.children[4].children[1].value; if (sum != ""){ sum += "+"; } sum += singelIntegralElement.innerHTML + "*" + count; } obj.innerHTML = eval(sum); } // 立即购买 function buyNow(){ var result = confirm("是否全部购买！"); if (result == false){ return } var obj = document.getElementById("mytable"); obj.innerHTML = ""; // 总价 allShopPriceTotal(); // 总积分 allIntegralTotal(); alert("购买成功！"); } // 添加到购物车 function addToCart(obj){ var result = confirm('是否将此商品添加至购物车？'); if (result == false){ return; } // 购物车表格 var cartBox = document.getElementById("mytable"); // 商品对象 var shop = { shopImg:obj.children[0].src, shopIntegral:parseInt(eval(obj.children[2].innerHTML + "/20")), shopPrice:obj.children[2].innerHTML } // 判断商品是否存在 var img = document.getElementsByClassName("imgbackground"); var result = "-1"; for (var i = 0;i < img.length;i++){ if (shop.shopImg == img[i].children[0].src){ result = i; } } if (result != "-1"){ var count = img[result].parentElement.children[4].children[1]; count.value = eval(count.value + "+1"); // 重新计算小计 singleAllSubTotal(); }else{ // 创建购物车对象 var tr = document.createElement("tr"); var td1 = document.createElement("td"); td1.innerHTML = '<input type="checkbox" class="selectOne" />'; var td2 = document.createElement("td"); td2.className = "imgbackground"; td2.innerHTML = '<img src="'+ shop.shopImg +'" height="100" width="100"/>'; var td3 = document.createElement("td"); td3.className = "integral"; td3.innerHTML = shop.shopIntegral; var td4 = document.createElement("td"); td4.innerHTML = shop.shopPrice; var td5 = document.createElement("td"); td5.innerHTML = '<button οnclick="reduce(this)">-</button>&nbsp;' + '<input type="text" size="1" readonly="true" value="1"/>' + '&nbsp;<button οnclick="plus(this)">+</button>'; var td6 = document.createElement("td"); td6.className = "shopCount"; td6.innerHTML = parseInt(shop.shopPrice); var td7 = document.createElement("td"); td7.innerHTML = '<a href="#" class="delete" οnclick="deleteChild(this)">删除</a>'; tr.appendChild(td1); tr.appendChild(td2); tr.appendChild(td3); tr.appendChild(td4); tr.appendChild(td5); tr.appendChild(td6); tr.appendChild(td7); // 添加到购物车 cartBox.appendChild(tr); } // 总价 allShopPriceTotal(); // 总积分 allIntegralTotal(); // 改变颜色 changeBackground(); } // 鼠标移动改变背景颜色 function changeBackground(){ var imgtd = document.getElementsByClassName("imgbackground"); for (singeltd of imgtd){ singeltd.onmousemove = function(){ this.style.backgroundColor = "orange"; } singeltd.onmouseleave = function(){ this.style.backgroundColor = "white"; } } } // 初始化界面内容 window.onload = function(){ changeBackground(); singleAllSubTotal(); allShopPriceTotal(); allIntegralTotal(); } </script>

最新回复(0)