js實(shí)現(xiàn)簡(jiǎn)單購(gòu)物車模塊
本文實(shí)例為大家分享了js實(shí)現(xiàn)簡(jiǎn)單購(gòu)物車模塊的具體代碼，供大家參考，具體內(nèi)容如下
1.html
<body> <div align='center'><form> <span class='font1'>名稱：</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>商品名稱</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://www.baoyu77737.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://www.baoyu77737.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. xml中的空格之完全解說2. ASP中解決“對(duì)象關(guān)閉時(shí),不允許操作。”的詭異問題……3. msxml3.dll 錯(cuò)誤 800c0019 系統(tǒng)錯(cuò)誤:-2146697191解決方法4. html小技巧之td,div標(biāo)簽里內(nèi)容不換行5. XML入門的常見問題(四)6. ASP中if語句、select 、while循環(huán)的使用方法7. 匹配模式 - XSL教程 - 48. 解決ASP中http狀態(tài)跳轉(zhuǎn)返回錯(cuò)誤頁(yè)的問題9. WML語言的基本情況10. CSS3中Transition屬性詳解以及示例分享
網(wǎng)公網(wǎng)安備