js實(shí)現(xiàn)簡(jiǎn)單購(gòu)物車(chē)模塊
本文實(shí)例為大家分享了js實(shí)現(xiàn)簡(jiǎn)單購(gòu)物車(chē)模塊的具體代碼，供大家參考，具體內(nèi)容如下
1.html
<body> <div align='center'><form> <span class='font1'>名稱(chēng)：</span><input type='text' id='name'> <span class='font1'>單價(jià)：</span><input type='text' id='price'> <input type='button' value='添加'> <input type='button' value='結(jié)算'> <input type='reset' value='重置'></form> </div> <div><table border='1' > <thead> <tr align='center'> <td><input type='checkbox' style=’cursor: pointer’></td> <td>商品名稱(chēng)</td> <td>價(jià)格</td> <td>數(shù)量</td> <td>操作</td> </tr> </thead> <tbody> </tbody></table> </div> <div id='b'><span>總價(jià)：</span><span style='color: red'>0</span> <span>商品數(shù)量：</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://m.b3g6.com/lib/jquery-3.3.1.js'></script> <script> //初始化按鈕 function initButton(){ $('input[name=j1]').off(); $('input[name=x1]').off(); //添加數(shù)量按鈕 $('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()); } ) //減少數(shù)量按鈕 $($('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()); }); }) //初始化每個(gè)選框選中的方法 function initCheckBox(){ $('tbody input[type=checkbox]').off(); $('tbody input[type=checkbox]').on('change',function (){$('#Total').text(cal());$('#TotalNum').text(calNum()); }); } //計(jì)算總價(jià) 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; } //計(jì)算總的數(shù)量 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; } //結(jié)算 $('#pay1').on('click',function (){ alert('一共消費(fèi)：'+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('輸入錯(cuò)誤！'); }else {var GameArr = [];var flag = false;var repeat = null;//得到名字?jǐn)?shù)組$('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; }}//如果有相同名字，改數(shù)量和價(jià)格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://m.b3g6.com/bcjs/14106.html' class=' rel='external nofollow' delete' style='color:red'>刪除</a></td>’ + '</tr>'$('tbody').append(goods);//每次添加完，綁定事件initButton();initdelete();initCheckBox(); }} });</script>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. JS中6個(gè)對(duì)象數(shù)組去重的方法2. Java commons-httpclient如果實(shí)現(xiàn)get及post請(qǐng)求3. 資深程序員：給Python軟件開(kāi)發(fā)測(cè)試的25個(gè)忠告！4. 一文帶你徹底理解Java序列化和反序列化5. PHP程序員簡(jiǎn)單的開(kāi)展服務(wù)治理架構(gòu)操作詳解(二)6. PHP利用curl發(fā)送HTTP請(qǐng)求的實(shí)例代碼7. Python基于requests庫(kù)爬取網(wǎng)站信息8. vscode運(yùn)行php報(bào)錯(cuò)php?not?found解決辦法9. PHP laravel實(shí)現(xiàn)導(dǎo)出PDF功能10. python中文本字符處理的簡(jiǎn)單方法記錄
網(wǎng)公網(wǎng)安備