原生js模拟淘宝购物车的介绍

这篇文章主要向大家推荐了一个原生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> <p class="slected view"> <p id="selectedviewlist" class="clearfix">  </p> <span class="arrow">.<span>.</span></span> </p> <p 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> <p class="fr closing">结算</p> <p class="fr selected_totle">合计：￥ <span id="pricetotle">0.00</span> </p> <p class="fr selectall" id="selected">已购商品 <span id = "selecttotle">0</span>件 <span class="arow up">+++</span> <span class="arow down">---</span> </p> </p></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 += '<p><img src="'+ tr[i].getelementsbytagname('img')[0].src +'"><span class ="del" index ="'+ i +'">取消选择</span></p>'; } 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实现带有3d立体感的银灰色竖排折叠菜单的代码
以上就是原生js模拟淘宝购物车的介绍的详细内容。

原生js模拟淘宝购物车的介绍

推荐信息