时间:2021-07-01 10:21:17 帮助过:15人阅读
本文实例讲述了原生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><img src="./imgs/applewatch.png"><span>取消选择</span></p> --> </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; }
以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!
相关推荐:
JS实现带有3D立体感的银灰色竖排折叠菜单的代码
以上就是原生js模拟淘宝购物车的介绍的详细内容,更多请关注Gxl网其它相关文章!