这篇文章主要介绍js如何实现简单购物车模块，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！
具体内容如下
输入框正则判断，两位数小数，开头可以为0
如果商品名字相同，自动数量+1，如果名字相同，价格不同，以最新价格为准（有bug，多个商品无法操作。程序混乱，随后在改）
选住商品，或添加减少数量，都会自动更新右下角的价格和数量
结算过的商品自动消失
1.html
<body> <div id="head" align="center"> <form> <span class="font1">名称：</span><input type="text" id="name"> <span class="font1">单价：</span><input type="text" id="price"> <input id="add1" type="button" value="添加"> <input id="pay1" type="button" value="结算"> <input id="set1" type="reset" value="重置"> </form> </div> <div> <table border="1" id="t" > <thead> <tr align="center"> <td><input type="checkbox" style='cursor: pointer'></td> <td>商品名称</td> <td>价格</td> <td>数量</td> <td>操作</td> </tr> </thead> <tbody> </tbody> </table> </div> <div align="right" id="b"> <span>总价：</span> <span id="Total" >0</span> <span>商品数量：</span> <span id="TotalNum" >0</span> </div> </body>
2.css
<style> body{ background-color: coral; } #head{ margin:30px auto 10px auto; } #name,#price{ background-color: aquamarine; } #add1,#pay1,#set1{ color: red; font-weight: bold; background-color: gold; cursor: pointer; } .font1{ font-weight: bold; font-size: large; } #t,#b{ border-collapse: collapse; margin: 30px auto; width: 600px; } #t thead{ border: 3px solid gold; color: white; background-color: blue; } #t tbody{ color: #1414bf; background-color: white; } </style>js部分
<script src="../lib/jquery-3.3.1.js"></script> <script> //初始化按钮 function initButton(){ $("input[name=j1]").off(); $("input[name=x1]").off(); //添加数量按钮 $("input[name=j1]").on("click", function (){ var num = parseInt($(this).prev().val()); if (num > 1){ $(this).prev().prev().attr("disabled",false); } if (num > 9){ $(this).attr("disabled","disabled"); return; } num++; if (num > 1){ $(this).prev().prev().attr("disabled",false); } if (num > 9){ $(this).attr("disabled","disabled"); } $(this).prev().val(num); $("#Total").text(cal()); $("#TotalNum").text(calNum()); } ) //减少数量按钮 $($("input[name=x1]")).click(function (){ var num = parseInt($(this).next().val()); if (num-1 < 10){ $("#add1").prop("disabled",false); } num--; if (num < 10){ $(this).next().next().prop("disabled",false); } if (num == 1){ $(this).prop("disabled","disabled"); } $(this).next().val(num); $("#Total").text(cal()); $("#TotalNum").text(calNum()); }); } //初始化删除 function initdelete(){ $(".delete").on("click",function (){ $(this).parent().parent().remove(); $("#Total").text(cal()); $("#TotalNum").text(calNum()); }); } //全选或全不选功能 $("thead input[type=checkbox]").on("click",function (){ $("tbody input[type=checkbox]").each(function (index,element){ $(this).prop("checked",$("thead input[type=checkbox]").prop("checked")); $("#Total").text(cal()); $("#TotalNum").text(calNum()); }); }) //初始化每个选框选中的方法 function initCheckBox(){ $("tbody input[type=checkbox]").off(); $("tbody input[type=checkbox]").on("change",function (){ $("#Total").text(cal()); $("#TotalNum").text(calNum()); }); } //计算总价 function cal(){ var price = null; $("tbody input[type=checkbox]:checked").each(function (){ var priceByOne = parseFloat($(this).parent().next().next().text()); var num = parseFloat($(this).parent().next().next().next().find("input[name='num']").val()); var totalMoneyByone = priceByOne * num; price+= totalMoneyByone ; }); return price; } //计算总的数量 function calNum(){ var totalNum = null; $("tbody input[type=checkbox]:checked").each(function (){ var num = parseInt($(this).parent().next().next().next().find("input[name='num']").val()); totalNum+=num; }); return totalNum; } //结算 $("#pay1").on("click",function (){ alert("一共消费："+cal()); $("thead input[type=checkbox]:checked").prop("checked",false); $("tbody input[type=checkbox]:checked").parent().parent().remove(); }); //添加 $("#add1").on("click",function (){ var name = $("#name").val(); var price = $("#price").val(); var priceZ = /(^[1-9]\d*(\.\d{1,2})?$)|(^0(\.\d{1,2})?$)/ if ((name == "" || price == "") ||(!priceZ.test(price)) ){ alert("输入错误！"); }else { var GameArr = []; var flag = false; var repeat = null; //得到名字数组 $("tbody").each(function (){ var finds = $(this).find(".goodsName"); for (let i = 0; i < finds.length; i++) { GameArr.push(finds.eq(i).text()); } }); for (let i = 0; i < GameArr.length; i++) { if (name == GameArr[i]){ repeat = i; flag = true; break; }} //如果有相同名字，改数量和价格 if (flag == true){ var totalNum = parseInt($("tbody:eq(" + repeat + ")").find("input[name='num']").val())+1; if (totalNum > 9){ $(this).attr("disabled","disabled"); } $("tbody:eq(" + repeat + ")").find("input[name='num']").val(totalNum); $("tbody:eq(" + repeat + ")").find(".goodsPrice").text(price); //否则拼接表格 }else { var goods = "<tr>"+ "<td><input type='checkbox' style='cursor: pointer'></td>"+ "<td class='goodsName'>"+name+"</td>"+ "<td class='goodsPrice'>"+price+"</td>"+ "<td>"+ "<input type='button' value='-' name='x1' style='cursor: pointer'> "+ "<input type='text' value='1' name='num'> "+ "<input type='button' value='+' name='j1' style='cursor: pointer'>" +"</td>"+ '<td><a href="" class=" rel="external nofollow" delete" >删除</a></td>' + "</tr>" $("tbody").append(goods); //每次添加完，绑定事件 initButton(); initdelete(); initCheckBox(); }} }); </script>以上是“js如何实现简单购物车模块”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注亿速云行业资讯频道！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
