原生js實現購物車
原生就js實現購物車增刪改查，供大家參考，具體內容如下
效果圖：
代碼：
<!DOCTYPE html><html> <head> <meta charset='utf-8'> <title></title> <style type='text/css'> *{ margin:0;padding:0; } .fl{ float: left; } .fr{ float: right; } .clearfix{ clear: both; zoom: 1; } .shopping{ width: 1200px; margin: 0 auto; font-size: 14px; } .shopping .header{ width: 100%; height: 50px; line-height: 50px; background: #ccc; color: #000000; font-weight: bold; text-align: left; } .shopping .header ul{ padding-left: 30px; } .shopping .header ul li{ width: 190px; list-style: none; } .shopping .footer{ width: 100%; height: 50px; background: #ccc; color: #000000; text-align: left; } .shopping .footer .footlf{ width: 200px; line-height: 50px; margin-left: 30px; } .shopping .footer .footrg{ width: 600px; text-align:right; } .shopping .footer .footrg span:nth-child(1){ display: inline-block; padding: 0px 25px; background: black; color: white; line-height: 48px; margin-right: 20px; } .shopping .footer .footrg span:nth-child(2),.shopping .footer .footrg span:nth-child(3){ display: inline-block; margin-right: 20px; } .shopping .footer .footrg span:nth-child(4){ font-size:16px; font-weight: bold; line-height: 50px; margin-right: 50px; } .shopping .footer .footrg s{ color: red; } .content{ margin: 10px 0px; } .content dl{ margin-bottom: 20px; } .content dl dt{ border: 1px solid #CCCCCC; height: 30px; line-height: 30px; font-weight: bold; } .content dl dt{ padding-left: 20px; } .content dl dd{ padding-left: 20px; border: 1px solid #CCCCCC; height: 100px; line-height: 100px; border-top: none; } .content dl dd ul li{ list-style: none; } .content dl dd ul li img{ width: 80px; height: 80px; vertical-align: middle; } .content dl dd ul li{ width: 190px; } .content dl dd ul li s{ color: red; font-weight: bold; } .content dl dd ul li input{ width: 30px; } s{ text-decoration: none; } .content .del{ cursor: pointer; } .minus{ padding: 0px 10px; background: red; cursor: pointer; } .plus{ padding: 0px 10px; background: red; cursor: pointer; } input{ cursor: pointer; } </style> </head> <body> <div class='shopping'> <div class='header clearfix'> <ul> <li class='fl'><input type='checkbox' name='' class='all'>全選</li> <li class='fl'>商品</li> <li class='fl'>單價</li> <li class='fl'>數量</li> <li class='fl'>價格</li> <li class='fl'>操作</li> </ul> </div> <div class='content'> <dl> <dt>店鋪：xxx快餐店1</dt> <dd> <ul> <li class='fl'><input type='checkbox' name='' class='ischeck'></li> <li class='fl'> <img src='http://www.b3g6.com/bcjs/imges/01.jpg' /> <span>涼茶</span> </li> <li class='fl'> <s>$<span class='price'>100</span></s> </li> <li class='fl'> <span class='minus'>-</span> <input type='text' name='' value='1'> <span class='plus'>+</span> </li> <li class='fl'> <s>$<span class='price_sum'>100</span></s> </li> <li class='fl'> <span class='del'>刪除</span> </li> </ul> </dd> </dl> <dl> <dt>店鋪：xxx快餐店2</dt> <dd> <ul> <li class='fl'><input type='checkbox' name='' class='ischeck'></li> <li class='fl'> <img src='http://www.b3g6.com/bcjs/imges/02.jpg' /> <span>涼茶2</span> </li> <li class='fl'> <s>$<span class='price'>200</span></s> </li> <li class='fl'> <span class='minus'>-</span> <input type='text' name='' value='1'> <span class='plus'>+</span> </li> <li class='fl'> <s>$<span class='price_sum'>200</span></s> </li> <li class='fl'> <span class='del'>刪除</span> </li> </ul> </dd> </dl> <dl> <dt>店鋪：xxx快餐店3</dt> <dd> <ul> <li class='fl'><input type='checkbox' name='' class='ischeck'></li> <li class='fl'> <img src='http://www.b3g6.com/bcjs/imges/02.jpg' /> <span>涼茶3</span> </li> <li class='fl'> <s>$<span class='price'>300</span></s> </li> <li class='fl'> <span class='minus'>-</span> <input type='text' name='' value='1' > <span class='plus'>+</span> </li> <li class='fl'> <s>$<span class='price_sum'>300</span></s> </li> <li class='fl'> <span class='del'>刪除</span> </li> </ul> </dd> </dl> </div> <div class='footer clearfix'> <div class='footlf fl'> <input type='checkbox' name='' class='all_is'>反選 <input type='checkbox' name='' id='cancel'>取消 </div> <div class='footrg fr'> <span>繼續購物</span> <span>已選商品<s id='piece'>0</s>件</span> <span>合計(不含運費)：￥<s class='sum_'>0.00</s></span> <span>結算</span> </div> </div> </div> </body> <script type='text/javascript'> //購物車功能要求 //1.勾選全選框 商品勾選狀態為已勾選狀態 并且計算商品合計 單價合計 //2.取消勾選時取消所以商品勾選 var del=document.getElementsByClassName('del');//刪除 var dl=document.getElementsByTagName('dl'); var all=document.getElementsByClassName('all')[0];//獲取全選按鈕 var all_is=document.getElementsByClassName('all_is')[0];//獲取取反按鈕 var ischeck=document.getElementsByClassName('ischeck');//獲取商品勾選狀態復選框節點 var minus=document.getElementsByClassName('minus');//商品減 var plus=document.getElementsByClassName('plus');//商品加 var count=document.getElementsByClassName('count');//商品數量 var price=document.getElementsByClassName('price');//獲得單價 var price_sum=document.getElementsByClassName('price_sum');//獲得商品價格 var sum_=document.getElementsByClassName('sum_')[0];//獲得商品總價格 var piece=document.getElementById('piece');//已選商品件數 var cancel=document.getElementById('cancel');//取消選擇 //全選功能 all_(); function all_(){ all.onchange=function(){ //當全選框狀態為ture 的時候循環勾選 商品狀態 為false 則相反 if(all.checked){ for(var i=0;i<ischeck.length;i++) { ischeck[i].checked=true; } piece_();//已選商品件數 } else{ for(var i=0;i<ischeck.length;i++) { ischeck[i].checked=false; } piece_();//已選商品件數 } shss();//每次商品勾選或者數量發生改變計算總額數 } } //商品狀態勾選 comm_ischeck(); function comm_ischeck(){ for (var i=0;i<ischeck.length;i++) { (function(j){ ischeck[j].onclick=function(){ shss();//每次商品勾選或者數量發生改變計算總額數 piece_();//每次商品勾選狀態發生變化計算已選商品件數 for (var k=0;j<ischeck.length;k++) {//循環判斷商品勾選狀態 if (!ischeck[k].checked) {//如果有一個為flase 則全選框取消勾選 all.checked = false; break; //結束循環 } //否則勾選 all.checked =true; } } })(i) } } //反選 all_iss(); function all_iss(){ all_is.onchange=function(){ //循環遍歷勾選狀態 商品狀態勾選則取消勾選 for(var i=0;i<ischeck.length;i++){ ischeck[i].checked = ischeck[i].checked?false:true; } shss();//每次商品勾選或者數量發生改變計算總額數 piece_();//每次商品勾選狀態發生變化計算已選商品件數 } } //減少商品 add_is(); function add_is(){ for(var i=0;i<minus.length;i++){ (function(i){ minus[i].onclick=function(){ if(parseInt(count[i].value)<2){ count[i].value=1; } else{ count[i].value=parseInt(count[i].value)-1; } // parseInt(count[i].value) 因為得到的value 是string 類型 運算需要進行類型轉換 //如果數量值<1默認為0 //count[i].value=parseInt(count[i].value)<1?0:(parseInt(count[i].value)-1); var pric=price[i].innerHTML;//商品單價 price_sum[i].innerHTML=parseInt(pric)*parseInt(count[i].value);//商品總結價格等于=商品單價*商品數量 shss();//每次商品勾選或者數量發生改變計算總額數 piece_();//每次商品勾選狀態發生變化計算已選商品件數 } })(i) } } //添加商品 add(); function add(){ for(var i=0;i<plus.length;i++){ //立即執行函數得到下標 (function(i){ plus[i].onclick=function(){ var pric=price[i].innerHTML;//商品單價 //因為得到的value 是string 類型 運算需要進行類型轉換 count[i].value=parseInt(count[i].value)+1;//改變數量值 price_sum[i].innerHTML=parseInt(pric)*parseInt(count[i].value);//商品總結價格等于=商品單價*商品數量 shss();//每次商品勾選或者數量發生改變計算總額數 piece_();//每次商品勾選狀態發生變化計算已選商品件數 } })(i) } } //count count_(); function count_(){ for(var i=0;i<count.length;i++){ (function(i){ count[i].onchange=function(){ var pric=price[i].innerHTML;//商品單價 //因為得到的value 是string 類型 運算需要進行類型轉換 count[i].value=parseInt(count[i].value)+1;//改變數量值 price_sum[i].innerHTML=parseInt(pric)*parseInt(count[i].value);//商品總結價格等于=商品單價*商品數量 shss();//每次商品勾選或者數量發生改變計算總額數 piece_();//每次商品勾選狀態發生變化計算已選商品件數 } })(i) } } //計算已選商品件數 piece_(); function piece_(){ piece.innerHTML=0; for(var i=0;i<ischeck.length;i++){ if(ischeck[i].checked){ piece.innerHTML=parseInt(piece.innerHTML)+parseInt(count[i].value); } } } //計算商品總額 shss(); function shss(){ sum_.innerHTML=0; for(var i=0;i<ischeck.length;i++){ if(ischeck[i].checked){ console.log(sum_.innerHTM); sum_.innerHTML=parseInt(sum_.innerHTML)+parseInt(price_sum[i].innerHTML); } } } //取消選擇 cancel_(); function cancel_(){ //取消按鈕點擊事件 cancel.onclick=function(){ for(var i=0;i<ischeck.length;i++){ ischeck[i].checked=false; } shss(); piece_(); } } //刪除 del_(); function del_(){ for(var i=0;i<del.length;i++){ (function(i){ del[i].onclick=function(){ dl[i].parentNode.removeChild(dl[i]); shss();//每次商品勾選或者數量發生改變計算總額數 piece_();//每次商品勾選狀態發生變化計算已選商品件數 } })(i) } } </script></html>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。
相關文章：
網公網安備