本文實例講述了原生js模擬淘寶購物車實現代碼。分享給大家供大家參考。具體如下：
通過JavaScript實現類似與淘寶的購物車效果，包括商品的單選、全選、刪除、修改數量、價格計算、數目計算、預覽等功能的實現。實現的效果圖：
相應的代碼：
shoppingCart.html
<!DOCTYPE html><html><head> <meta charset = "UTF-8"> <title>JavaScript實現購物車項目實戰</title> <link rel="stylesheet" type="text/css" href="./css/shoppingCart.css"> <script type="text/javascript" src="./js/shoppingCart.js"></script></head><body> <table id="cartTable"> <thead> <tr class="order_content"> <th><input class="check_all check" type="checkbox"></input> 全選</th> <th>商品</th> <th>單價</th> <th>數量</th> <th>小計</th> <th>操作</th> </tr> </thead> <tbody> <tr class="order_content"> <td class="check"><input class = "check_one check" type="checkbox"></input></td> <td class="goods"><img src="./imgs/apple6s.png"><span>Iphone 6S</span></td> <td class="price">5099.88</td> <td class="count"> <span class="reduce">-</span> <input class="count_input" type="text" value="1"></input> <span class="add">+</span> </td> <td class="subtotle">5099.88</td> <td class="operation"><span class="delete">刪除<span></td> </tr> <tr class="order_content"> <td class="check"><input class = "check_one check" type="checkbox"></input></td> <td class="goods"><img src="./imgs/macbook.png"><span>MacBook Air</span></td> <td class="price">1099.99</td> <td class="count"> <span class="reduce">-</span> <input class="count_input" type="text" value="1"></input> <span class="add">+</span> </td> <td class="subtotle">1099.99</td> <td class="operation"><span class="delete">刪除<span></td> </tr> <tr class="order_content"> <td class="check"><input class = "check_one check" type="checkbox"></input></td> <td class="goods"><img src="./imgs/ipadmini.png"><span>Ipad mini2 銀16g WLAN7.9英寸</span></td> <td class="price">6599.00</td> <td class="count"> <span class="reduce">-</span> <input class="count_input" type="text" value="1"></input> <span class="add">+</span> </td> <td class="subtotle">6599.00</td> <td class="operation"><span class="delete">刪除<span></td> </tr> <tr> <td class="check"><input class = "check_one check" type="checkbox"></input></td> <td class="goods"><img src="./imgs/applewatch.png"><span>IWatch EXTS Min</span></td> <td class="price">9998.68</td> <td class="count"> <span class="reduce">-</span> <input class="count_input" type="text" value="1"></input> <span class="add">+</span> </td> <td class="subtotle">9998.68</td> <td class="operation"><span class="delete">刪除<span></td> </tr> </tbody> </table> <div class="slected view"> <div id="selectedViewList" class="clearfix"> <!-- <div><img src="./imgs/applewatch.png"><span>取消選擇</span></div> --> </div> <span class="arrow">.<span>.</span></span> </div> <div id = "footer" class="footer"> <label class="fl select_all" ><input class="check_all check" type="checkbox"> 全選</input></label> <a class="fl delete_all" id="deleteAll" href="javascript:;">刪除</a> <div class="fr closing">結算</div> <div class="fr selected_totle">合計：￥ <span id="priceTotle">0.00</span> </div> <div class="fr selectAll" id="selected">已購商品 <span id = "selectTotle">0</span>件 <span class="arow up">+++</span> <span class="arow down">---</span> </div> </div></body></html>
shoppingCart.js
window.onload = function(){ //低版本的IE瀏覽器不支持getElementByClassName方法，考慮兼容性,重寫方法。 if (!document.getElementByClassName) { document.getElementByClassName =function(cls){ var ret = []; var clsElments = document.getElementsByTagName('*'); for (var i = 0, len = clsElments.length; i < len; i++) { //考慮一個標簽有多個class的情況,這里用正則表達式會好一點 if (clsElments[i].className == cls || (clsElments[i].className.indexOf(cls + " ") >= 0) || (clsElments[i].className.indexOf(" " + cls + " ") >= 0) || (clsElments[i].className.indexOf(" " + cls) >= 0)) { ret.push(clsElments[i]); } } return ret; } } var cartTable = document.getElementById("cartTable"); var tr = cartTable.children[1].rows; //table標簽特有的屬性，rows可以獲得表格元素的所有tr行。 var checkInput = document.getElementByClassName('check');//獲得所有的單選框 var checkAllInput = document.getElementByClassName('check_all');//獲得所有的單選框 var priceTotle = document.getElementById("priceTotle");//總價 var selectTotle = document.getElementById("selectTotle");//已選商品 var selected = document.getElementById("selected"); var footer = document.getElementById("footer");//底部標簽 var selectedViewList = document.getElementById("selectedViewList");//底部標簽 var deleteAll = document.getElementById("deleteAll"); //計算總價格和數量 function getTotle(){ var selectNum = 0;//數量 var priceNum = 0;//價格 var HTMLstr = ""; //縮略圖的字符串拼接 for (var i = 0,len = tr.length; i < len; i++) { if (tr[i].getElementsByTagName("input")[0].checked) { tr[i].className ="on"; selectNum += parseInt(tr[i].getElementsByTagName("input")[1].value); priceNum += parseFloat(tr[i].cells[4].innerHTML); //拼接字符串顯示已經選擇的商品 HTMLstr += '<div><img src="'+ tr[i].getElementsByTagName('img')[0].src +'"><span class ="del" index ="'+ i +'">取消選擇</span></div>'; } else{ tr[i].className = ""; } } selectTotle.innerHTML = selectNum; priceTotle.innerHTML = priceNum.toFixed(2);//保留兩位小數 selectedViewList.innerHTML = HTMLstr; } //計算小計價格 function getSubTotle(tr){ var tds = tr.cells; var price = parseFloat(tds[2].innerHTML); var num = parseInt(tr.getElementsByTagName("input")[1].value); var subTotle = parseFloat(price * num).toFixed(2); tds[4].innerHTML = subTotle; } //復選框綁定單擊事件 for (var i = 0, len = checkInput.length; i < len; i++){ checkInput[i].onclick =function (){ //判斷全選按鈕，變更 if (this.className == "check_all check") { for (var j = 0; j < len; j++){ checkInput[j].checked = this.checked; } } if (this.checked == false) { for (var k = 0,len2 = checkAllInput.length; k < len2; k++){ checkAllInput[k].checked = false; } } getTotle(); } } //控制底部標簽的顯示 selected.onclick = function(){ if (footer.className == "footer") { footer.className == "footer show"; } else { footer.className == "footer"; } } //圖片縮略圖的取消選擇按鈕功能,e為事件對象 selectedViewList.onclick = function(e){ //兼容低版本的IE/* if (e){ e = e; }else{ e = window.event; } */ var e = e || window.event; var el = e.srcElement; if (el.className == "del") { var index = el.getAttribute("index"); var input = tr[index].getElementsByTagName("input")[0]; input.checked = false; input.onclick(); } } //實現加減、刪除操作。同樣用事件代理的方法實現 for (var i = 0, len3 = tr.length; i < len3; i++){ tr[i].onclick = function(e){ var e = e || window.event; var el = e.srcElement; var clsName = el.className; var input = this.getElementsByTagName("input")[1]; var inputValue = parseInt(input.value); var reduce = this.getElementsByTagName("span")[1]; switch (clsName){ case "add": /*parseInt(inputValue) ++;*/ input.value = inputValue + 1; reduce.innerHTML ="-"; getSubTotle(this); break; case "reduce": if(inputValue >= 1){ input.value = inputValue - 1; }else{ reduce.innerHTML =""; } getSubTotle(this); break; case "delete": var conf = confirm("確定刪除這個商品？"); if (conf) { this.parentNode.removeChild(this); } break; default: break; } getTotle(); } //處理從手動輸入商品數量 tr[i].getElementsByTagName("input")[1].onkeyup = function(){ var val = this.value; var tr = this.parentNode.parentNode; if (isNaN(val) || val < 0 ) { val = 1; } this.value = val; getSubTotle(tr); } } //全選刪除 deleteAll.onclick = function(){ if (selectTotle.innerHTML !="0") { var conf = confirm("確定刪除這些商品？"); if (conf) { for (var i = 0, len = tr.length; i < len; i++) { var input = tr[i].getElementsByTagName("input")[0]; if(input.checked){ tr[i].parentNode.removeChild(tr[i]); } } } } }}//取消選擇--采用事件代理---放到父元素上。
shoppingCart.css
.count_input{ width: 39px; height: 15px; line-height: 15px; border: 1px solid #aaa; color: #343434; text-align: center; padding: 4px 0; background-color: #fff;}span.add, span.reduce{ height: 23px; width: 27px; border: 1px solid #e5e5e5; background: #f0f0f0; line-height: 23px; color: #444;}.closing{ display: inline-block; width: 120px; height: 50px; line-height: 50px; background: #f40; text-align: center; font-family: 'Microsoft Yahei'; font-size: 20px; -webkit-border-radius: 2px; -moz-border-radius: 2px; -ms-border-radius: 2px; border-radius: 2px; text-decoration: none; cursor: pointer;}.fr{ float: right;}.selected_totle, .selectAll, .select_all, .delete_all{ margin-top: 15px;}.footer{ height: 50px; background: #e5e5e5; font-family: 'Microsoft Yahei';}#selectTotle, #priceTotle,.subtotle { color: #f40; font-weight: 700; font-size: 18px; font-family: tohoma,arial; padding: 5px;}以上就是js模擬淘寶購物車的全部項目代碼，歡迎大家學習品鑒，從中得到收獲。
新聞熱點
疑難解答
