js實現簡單購物車模塊
本文實例為大家分享了js實現簡單購物車模塊的具體代碼，供大家參考，具體內容如下
1.html
<body> <div align='center'><form> <span class='font1'>名稱：</span><input type='text' id='name'> <span class='font1'>單價：</span><input type='text' id='price'> <input type='button' value='添加'> <input type='button' value='結算'> <input type='reset' value='重置'></form> </div> <div><table border='1' > <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 id='b'><span>總價：</span><span style='color: red'>0</span> <span>商品數量：</span><span style='color: red'>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='http://www.aoyou183.cn/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='http://www.aoyou183.cn/bcjs/14106.html' class=' rel='external nofollow' delete' style='color:red'>刪除</a></td>’ + '</tr>'$('tbody').append(goods);//每次添加完，綁定事件initButton();initdelete();initCheckBox(); }} });</script>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。
相關文章：
網公網安備