這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)碛嘘P(guān)使用原生js實(shí)現(xiàn)購物車,文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述,閱讀完這篇文章希望大家可以有所收獲。
創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù),包含不限于成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作、遂川網(wǎng)絡(luò)推廣、小程序開發(fā)、遂川網(wǎng)絡(luò)營銷、遂川企業(yè)策劃、遂川品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營等,從售前售中售后,我們都將竭誠為您服務(wù),您的肯定,是我們大的嘉獎(jiǎng);創(chuàng)新互聯(lián)為所有大學(xué)生創(chuàng)業(yè)者提供遂川建站搭建服務(wù),24小時(shí)服務(wù)熱線:18980820575,官方網(wǎng)址:muchs.cn原生就js實(shí)現(xiàn)購物車增刪改查,供大家參考,具體內(nèi)容如下
效果圖:
代碼:
<!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">單價(jià)</li> <li class="fl">數(shù)量</li> <li class="fl">價(jià)格</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="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="" class="count" 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="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="" class="count" 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="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="" class="count" 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>繼續(xù)購物</span> <span>已選商品<s id="piece">0</s>件</span> <span>合計(jì)(不含運(yùn)費(fèi)):¥<s class="sum_">0.00</s></span> <span>結(jié)算</span> </div> </div> </div> </body> <script type="text/javascript"> //購物車功能要求 //1.勾選全選框 商品勾選狀態(tài)為已勾選狀態(tài) 并且計(jì)算商品合計(jì) 單價(jià)合計(jì) //2.取消勾選時(shí)取消所以商品勾選 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");//獲取商品勾選狀態(tài)復(fù)選框節(jié)點(diǎn) var minus=document.getElementsByClassName("minus");//商品減 var plus=document.getElementsByClassName("plus");//商品加 var count=document.getElementsByClassName("count");//商品數(shù)量 var price=document.getElementsByClassName("price");//獲得單價(jià) var price_sum=document.getElementsByClassName("price_sum");//獲得商品價(jià)格 var sum_=document.getElementsByClassName("sum_")[0];//獲得商品總價(jià)格 var piece=document.getElementById("piece");//已選商品件數(shù) var cancel=document.getElementById("cancel");//取消選擇 //全選功能 all_(); function all_(){ all.onchange=function(){ //當(dāng)全選框狀態(tài)為ture 的時(shí)候循環(huán)勾選 商品狀態(tài) 為false 則相反 if(all.checked){ for(var i=0;i<ischeck.length;i++) { ischeck[i].checked=true; } piece_();//已選商品件數(shù) } else{ for(var i=0;i<ischeck.length;i++) { ischeck[i].checked=false; } piece_();//已選商品件數(shù) } shss();//每次商品勾選或者數(shù)量發(fā)生改變計(jì)算總額數(shù) } } //商品狀態(tài)勾選 comm_ischeck(); function comm_ischeck(){ for (var i=0;i<ischeck.length;i++) { (function(j){ ischeck[j].onclick=function(){ shss();//每次商品勾選或者數(shù)量發(fā)生改變計(jì)算總額數(shù) piece_();//每次商品勾選狀態(tài)發(fā)生變化計(jì)算已選商品件數(shù) for (var k=0;j<ischeck.length;k++) {//循環(huán)判斷商品勾選狀態(tài) if (!ischeck[k].checked) {//如果有一個(gè)為flase 則全選框取消勾選 all.checked = false; break; //結(jié)束循環(huán) } //否則勾選 all.checked =true; } } })(i) } } //反選 all_iss(); function all_iss(){ all_is.onchange=function(){ //循環(huán)遍歷勾選狀態(tài) 商品狀態(tài)勾選則取消勾選 for(var i=0;i<ischeck.length;i++){ ischeck[i].checked = ischeck[i].checked?false:true; } shss();//每次商品勾選或者數(shù)量發(fā)生改變計(jì)算總額數(shù) piece_();//每次商品勾選狀態(tài)發(fā)生變化計(jì)算已選商品件數(shù) } } //減少商品 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) 因?yàn)榈玫降膙alue 是string 類型 運(yùn)算需要進(jìn)行類型轉(zhuǎn)換 //如果數(shù)量值<1默認(rèn)為0 //count[i].value=parseInt(count[i].value)<1?0:(parseInt(count[i].value)-1); var pric=price[i].innerHTML;//商品單價(jià) price_sum[i].innerHTML=parseInt(pric)*parseInt(count[i].value);//商品總結(jié)價(jià)格等于=商品單價(jià)*商品數(shù)量 shss();//每次商品勾選或者數(shù)量發(fā)生改變計(jì)算總額數(shù) piece_();//每次商品勾選狀態(tài)發(fā)生變化計(jì)算已選商品件數(shù) } })(i) } } //添加商品 add(); function add(){ for(var i=0;i<plus.length;i++){ //立即執(zhí)行函數(shù)得到下標(biāo) (function(i){ plus[i].onclick=function(){ var pric=price[i].innerHTML;//商品單價(jià) //因?yàn)榈玫降膙alue 是string 類型 運(yùn)算需要進(jìn)行類型轉(zhuǎn)換 count[i].value=parseInt(count[i].value)+1;//改變數(shù)量值 price_sum[i].innerHTML=parseInt(pric)*parseInt(count[i].value);//商品總結(jié)價(jià)格等于=商品單價(jià)*商品數(shù)量 shss();//每次商品勾選或者數(shù)量發(fā)生改變計(jì)算總額數(shù) piece_();//每次商品勾選狀態(tài)發(fā)生變化計(jì)算已選商品件數(shù) } })(i) } } //count count_(); function count_(){ for(var i=0;i<count.length;i++){ (function(i){ count[i].onchange=function(){ var pric=price[i].innerHTML;//商品單價(jià) //因?yàn)榈玫降膙alue 是string 類型 運(yùn)算需要進(jìn)行類型轉(zhuǎn)換 count[i].value=parseInt(count[i].value)+1;//改變數(shù)量值 price_sum[i].innerHTML=parseInt(pric)*parseInt(count[i].value);//商品總結(jié)價(jià)格等于=商品單價(jià)*商品數(shù)量 shss();//每次商品勾選或者數(shù)量發(fā)生改變計(jì)算總額數(shù) piece_();//每次商品勾選狀態(tài)發(fā)生變化計(jì)算已選商品件數(shù) } })(i) } } //計(jì)算已選商品件數(shù) 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); } } } //計(jì)算商品總額 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_(){ //取消按鈕點(diǎn)擊事件 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();//每次商品勾選或者數(shù)量發(fā)生改變計(jì)算總額數(shù) piece_();//每次商品勾選狀態(tài)發(fā)生變化計(jì)算已選商品件數(shù) } })(i) } } </script> </html>
文章標(biāo)題:使用原生js實(shí)現(xiàn)購物車-創(chuàng)新互聯(lián)
轉(zhuǎn)載源于:http://muchs.cn/article36/degepg.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供品牌網(wǎng)站設(shè)計(jì)、建站公司、微信公眾號(hào)、用戶體驗(yàn)、企業(yè)網(wǎng)站制作、網(wǎng)站導(dǎo)航
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容