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

2019-11-20 11:14:22

字体：大中小

来源：转载

供稿：网友

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

上一篇：JavaScript如何获取数组最大值和最小值

下一篇：JavaScript统计网站访问次数的实现代码