本文实例讲述了原生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> <th><input type="checkbox"></input>全选</th> <th>商品</th> <th>单价</th> <th>数量</th> <th>小计</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td><input class = "check_one check" type="checkbox"></input></td> <td><img src="./imgs/apple6s.png"><span>Iphone 6S</span></td> <td>5099.88</td> <td> <span>-</span> <input type="text" value="1"></input> <span>+</span> </td> <td>5099.88</td> <td><span>删除<span></td> </tr> <tr> <td><input class = "check_one check" type="checkbox"></input></td> <td><img src="./imgs/macbook.png"><span>MacBook Air</span></td> <td>1099.99</td> <td> <span>-</span> <input type="text" value="1"></input> <span>+</span> </td> <td>1099.99</td> <td><span>删除<span></td> </tr> <tr> <td><input class = "check_one check" type="checkbox"></input></td> <td><img src="./imgs/ipadmini.png"><span>Ipad mini2 银16g WLAN7.9英寸</span></td> <td>6599.00</td> <td> <span>-</span> <input type="text" value="1"></input> <span>+</span> </td> <td>6599.00</td> <td><span>删除<span></td> </tr> <tr> <td><input class = "check_one check" type="checkbox"></input></td> <td><img src="./imgs/applewatch.png"><span>IWatch EXTS Min</span></td> <td>9998.68</td> <td> <span>-</span> <input type="text" value="1"></input> <span>+</span> </td> <td>9998.68</td> <td><span>删除<span></td> </tr> </tbody> </table> <div> <div id="selectedViewList"> <> </div> <span>.<span>.</span></span> </div> <div id = "footer"> <label ><input type="checkbox">全选</input></label> <a id="deleteAll" href="javascript:;">删除</a> <div>结算</div> <div>合计：￥ <span id="priceTotle">0.00</span> </div> <div id="selected">已购商品 <span id = "selectTotle">0</span>件 <span>+++</span> <span>---</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模拟淘宝购物车的全部项目代码，欢迎大家学习品鉴，从中得到收获。
【原生js模拟淘宝购物车项目实战】相关文章：
★ Java语言概述