利用js实现购物车相关功能
生活随笔
收集整理的這篇文章主要介紹了
利用js实现购物车相关功能
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
根據給出購物車頁面，用js實現功能部分。
1、實現全選功能。
2、實現四個分項按鈕跟隨狀態的變化并給每一個按鈕添加事件，使每個狀態發生變化時，判斷當前有多少個選中狀態的功能。
3、實現已選商品的件數以及合計多少錢的跟蹤狀態。
4、實現當點擊數量中的“+”或“-”按鈕時，可控制數量以及小計的變化。
5、實現刪除功能。
注：代碼中有相關注釋，可參考
<!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>原生JS實現購物車結算功能代碼</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>數量</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" >結 算</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>// 第一步:實現全選功能//window.onload延時加載//等待結構加載完成，才加載jswindow.onload=function(){//js實現dom事件編程//1、事件源 發現頁面中存在兩個全選按鈕//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獲取到內容是字符型//數值+字符 自動將數值轉化為字符 實現拼接if(checkOnes[j].checked){count=count+parseInt(countInputs[j].value)total=total+Number(subtotals[j].innerHTML)}}//當前selectedTotal內容設置countselectedTotal.innerHTML=count//js 小數精度問題//保留兩位小數 .toFixed(2) priceTotal.innerHTML=total.toFixed(2)}for(var n=0;n<checkAlls.length;n++){checkAlls[n].onchange=function(){//當狀態發生改變時，讓其得四個分項按鈕跟隨狀態變化//this==觸發事件源得元素//復選框得選中狀態 .checked//checkOnes 依次拿出數組中的內容，讓其狀態和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()}}//給每一個單項按鈕添加事件，每一個狀態發生變化時，單項按鈕，判斷當前有多少個選中狀態//如果選擇的個數=總個數，那么全選選中，反之取消for(var n=0;n<checkOnes.length;n++){checkOnes[n].onchange=function(){//統計當前單項按鈕得選中個數var sum=0//依次判斷每個單選按鈕選中狀態，選中sum++for(var j=0;j<checkOnes.length;j++){if(checkOnes[j].checked){sum++}}//sum=單選按鈕個數for(var j=0;j<checkAlls.length;j++){checkAlls[j].checked= sum==checkOnes.length}totals()}}//點擊+按鈕時，可控制數量以及小計的變化var adds=document.getElementsByClassName("add")//依次將每個+號按鈕，添加對應的點擊事件for(var n=0;n<adds.length;n++){adds[n].index=n //依次給每個adds[n],添加adds[n].onclick=function(){//點擊對應的按鈕時，找到其對應的數量，隨之發生變化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(){//通過元素的層級操作//通過層級關系，發現要刪除的元素var tr=this.parentNode.parentNode//如何在js中移除對應元素//1、先找到要被移除的父級//2、父級.removeChild（移除的元素）var table=tr.parentNode //找到被移除元素的父級table.removeChild(tr)totals()//需要計算當前選中個數，和所有復選框的個數，判斷全選是否選中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>總結
以上是生活随笔為你收集整理的利用js实现购物车相关功能的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： layui模板引擎做动态增加和减少表单
- 下一篇： PDF转换WORD，方法如下：