原生js模拟淘宝购物车项目实战

本文实例讲述了原生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模拟淘宝购物车的全部项目代码，欢迎大家学习品鉴，从中得到收获。