利用js实现购物车相关功能
生活随笔
收集整理的這篇文章主要介紹了
利用js实现购物车相关功能
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
根據(jù)給出購物車頁面，用js實現(xiàn)功能部分。
1、實現(xiàn)全選功能。
2、實現(xiàn)四個分項按鈕跟隨狀態(tài)的變化并給每一個按鈕添加事件，使每個狀態(tài)發(fā)生變化時，判斷當前有多少個選中狀態(tài)的功能。
3、實現(xiàn)已選商品的件數(shù)以及合計多少錢的跟蹤狀態(tài)。
4、實現(xiàn)當點擊數(shù)量中的“+”或“-”按鈕時，可控制數(shù)量以及小計的變化。
5、實現(xiàn)刪除功能。
注：代碼中有相關注釋，可參考
<!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>原生JS實現(xiàn)購物車結(jié)算功能代碼</title> <link rel="stylesheet" href="css/style.css"/> <script type="text/javascript" ></script> </head> <body> <div class="catbox"><table id="cartTable"><thead><tr><th><label><input class="check-all check" type="checkbox"/> 全選</label></th><th>商品</th><th>單價</th><th>數(shù)量</th><th>小計</th><th>操作</th></tr></thead><tbody><tr><td class="checkbox"><input class="check-one check" type="checkbox"/></td><td class="goods"><img src="images/1.jpg" alt=""/><span>Casio/卡西歐 EX-TR350</span></td><td class="price">5999.88</td><td class="count"><span class="reduce">-</span><input class="count-input" type="text" value="1"/><span class="add">+</span></td><td class="subtotal">5999.88</td><td class="operation"><span class="delete">刪除</span></td></tr><tr><td class="checkbox"><input class="check-one check" type="checkbox"/></td><td class="goods"><img src="images/2.jpg" alt=""/><span>Canon/佳能 PowerShot SX50 HS</span></td><td class="price">3888.50</td><td class="count"><span class="reduce">-</span><input class="count-input" type="text" value="1"/><span class="add">+</span></td><td class="subtotal">3888.50</td><td class="operation"><span class="delete">刪除</span></td></tr><tr><td class="checkbox"><input class="check-one check" type="checkbox"/></td><td class="goods"><img src="images/3.jpg" alt=""/><span>Sony/索尼 DSC-WX300</span></td><td class="price">1428.50</td><td class="count"><span class="reduce">-</span><input class="count-input" type="text" value="1"/><span class="add">+</span></td><td class="subtotal">1428.50</td><td class="operation"><span class="delete">刪除</span></td></tr><tr><td class="checkbox"><input class="check-one check" type="checkbox"/></td><td class="goods"><img src="images/4.jpg" alt=""/><span>Fujifilm/富士 instax mini 25</span></td><td class="price">640.60</td><td class="count"><span class="reduce">-</span><input class="count-input" type="text" value="1"/><span class="add">+</span></td><td class="subtotal">640.60</td><td class="operation"><span class="delete">刪除</span></td></tr></tbody></table><div class="foot" id="foot"><label class="fl select-all"><input type="checkbox" class="check-all check"/> 全選</label><a class="fl delete" id="deleteAll" >刪除</a><div class="fr closing" >結(jié) 算</div><input type="hidden" id="cartTotalPrice" /><div class="fr total">合計：￥<span id="priceTotal">0.00</span></div><div class="fr selected" id="selected">已選商品<span id="selectedTotal">0</span>件<span class="arrow up">︽</span><span class="arrow down">︾</span></div><div class="selected-view"><div id="selectedViewList" class="clearfix"><div><img src="images/1.jpg"><span>取消選擇</span></div></div><span class="arrow">◆<span>◆</span></span> </div></div> </div> <script>// 第一步:實現(xiàn)全選功能//window.onload延時加載//等待結(jié)構(gòu)加載完成，才加載jswindow.onload=function(){//js實現(xiàn)dom事件編程//1、事件源 發(fā)現(xiàn)頁面中存在兩個全選按鈕//2、添加事件onchangevar prices=document.getElementsByClassName("price")var checkAlls=document.getElementsByClassName("check-all")var checkOnes=document.getElementsByClassName("check-one")var selectedTotal=document.getElementById("selectedTotal")var priceTotal=document.getElementById("priceTotal")var subtotals=document.getElementsByClassName("subtotal")var countInputs=document.getElementsByClassName("count-input")function totals(){var count=0var total=0for(var j=0;j<countInputs.length;j++){//.value獲取到內(nèi)容是字符型//數(shù)值+字符 自動將數(shù)值轉(zhuǎn)化為字符 實現(xiàn)拼接if(checkOnes[j].checked){count=count+parseInt(countInputs[j].value)total=total+Number(subtotals[j].innerHTML)}}//當前selectedTotal內(nèi)容設置countselectedTotal.innerHTML=count//js 小數(shù)精度問題//保留兩位小數(shù) .toFixed(2) priceTotal.innerHTML=total.toFixed(2)}for(var n=0;n<checkAlls.length;n++){checkAlls[n].onchange=function(){//當狀態(tài)發(fā)生改變時，讓其得四個分項按鈕跟隨狀態(tài)變化//this==觸發(fā)事件源得元素//復選框得選中狀態(tài) .checked//checkOnes 依次拿出數(shù)組中的內(nèi)容，讓其狀態(tài)和this.checked保持一致for(var j=0;j<checkOnes.length;j++){checkOnes[j].checked=this.checked}//另外得到一個全選跟隨變化，找到另外一個全選for(var j=0;j<checkAlls.length;j++){checkAlls[j].checked=this.checked}totals()}}//給每一個單項按鈕添加事件，每一個狀態(tài)發(fā)生變化時，單項按鈕，判斷當前有多少個選中狀態(tài)//如果選擇的個數(shù)=總個數(shù)，那么全選選中，反之取消for(var n=0;n<checkOnes.length;n++){checkOnes[n].onchange=function(){//統(tǒng)計當前單項按鈕得選中個數(shù)var sum=0//依次判斷每個單選按鈕選中狀態(tài)，選中sum++for(var j=0;j<checkOnes.length;j++){if(checkOnes[j].checked){sum++}}//sum=單選按鈕個數(shù)for(var j=0;j<checkAlls.length;j++){checkAlls[j].checked= sum==checkOnes.length}totals()}}//點擊+按鈕時，可控制數(shù)量以及小計的變化var adds=document.getElementsByClassName("add")//依次將每個+號按鈕，添加對應的點擊事件for(var n=0;n<adds.length;n++){adds[n].index=n //依次給每個adds[n],添加adds[n].onclick=function(){//點擊對應的按鈕時，找到其對應的數(shù)量，隨之發(fā)生變化var index=this.index //當前點擊元素的索引值countInputs[index].value++//小計變化var count=countInputs[index].valuevar price=prices[index].innerHTMLsubtotals[index].innerHTML=(count*price).toFixed(2)totals()}}var reduces=document.getElementsByClassName("reduce")for(var n=0;n<reduces.length;n++){reduces[n].index=nreduces[n].onclick=function(){var index=this.index if(countInputs[index].value==0){return}countInputs[index].value--var count=countInputs[index].valuevar price=prices[index].innerHTMLsubtotals[index].innerHTML=(count*price).toFixed(2)totals()}}var deletes=document.getElementsByClassName("delete")for(var n=0;n<deletes.length;n++){deletes[n].onclick=function(){//通過元素的層級操作//通過層級關系，發(fā)現(xiàn)要刪除的元素var tr=this.parentNode.parentNode//如何在js中移除對應元素//1、先找到要被移除的父級//2、父級.removeChild（移除的元素）var table=tr.parentNode //找到被移除元素的父級table.removeChild(tr)totals()//需要計算當前選中個數(shù)，和所有復選框的個數(shù)，判斷全選是否選中for(var n=0;n<checkOnes.length;n++){checkOnes[n].onclick=function(){var sum=0for(var j=0;j<checkOnes.length;j++){if(checkOnes[j].checked){sum++}}for(var j=0;j<checkAlls.length;j++){checkAlls[j].checked= sum==checkOnes.lengthtotals()}}}for(var j=0;j<adds.length;j++){reduces[j].index=jadds[j].index=j}}}} </script> </body> </html>總結(jié)
以上是生活随笔為你收集整理的利用js实现购物车相关功能的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： layui模板引擎做动态增加和减少表单
- 下一篇： PDF转换WORD，方法如下：