原生js模擬淘寶購物車專案實戰-js教程-PHP中文網

首頁

web前端

js教程

原生js模擬淘寶購物車專案實戰

高洛峰

Mar 15, 2017 pm 04:22 PM

原生js購物車

本文實例講述了原生js模擬淘寶購物車實作程式碼。分享給大家供大家參考。具體如下：

透過JavaScript實現類似與淘寶的購物車效果，包括商品的單選、全選、刪除、修改數量、價格計算、數目計算、預覽等功能的實現。實現的效果圖：

原生js模擬淘寶購物車專案實戰

對應的程式碼：

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="/static/imghwm/default1.png"  data-src="./imgs/apple6s.png"  class="lazy"   alt="原生js模擬淘寶購物車專案實戰" ><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="/static/imghwm/default1.png"  data-src="./imgs/macbook.png"  class="lazy"   alt="原生js模擬淘寶購物車專案實戰" ><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="/static/imghwm/default1.png"  data-src="./imgs/ipadmini.png"  class="lazy"   alt="原生js模擬淘寶購物車專案實戰" ><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="/static/imghwm/default1.png"  data-src="./imgs/applewatch.png"  class="lazy"   alt="原生js模擬淘寶購物車專案實戰" ><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="/static/imghwm/default1.png"  data-src="./imgs/applewatch.png"  class="lazy"   alt="原生js模擬淘寶購物車專案實戰" ><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(&#39;*&#39;);
   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(&#39;check&#39;);//获得所有的单选框
 var checkAllInput = document.getElementByClassName(&#39;check_all&#39;);//获得所有的单选框
 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 += &#39;<p><img  src="/static/imghwm/default1.png"  data-src="&#39;+ tr[i].getElementsByTagName(&#39;img&#39;)[0].src +&#39;"  class="lazy"   alt="原生js模擬淘寶購物車專案實戰" ><span class ="del" index ="&#39;+ i +&#39;">取消选择</span></p>&#39;;
 
   }
   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]);
     }
    }
   }
  }  
 }
}
 
//取消选择--采用事件代理---放到父元素上。
<br>

.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: &#39;Microsoft Yahei&#39;;
 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: &#39;Microsoft Yahei&#39;;
}
#selectTotle, #priceTotle,.subtotle {
 color: #f40;
 font-weight: 700;
 font-size: 18px;
 font-family: tohoma,arial;
 padding: 5px;
 
}

r9鑑，從中得到收穫。

更多原生js模擬淘寶購物車專案實戰相關文章請關注PHP中文網！

php新手購物車實現的原理

jQuery基於json與cookie實現購物車的方法

php 實作簡單加入購物車的圖文程式碼詳細介紹

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

JavaScript數據類型：瀏覽器和nodejs之間是否有區別？May 14, 2025 am 12:15 AM

JavaScript核心數據類型在瀏覽器和Node.js中一致，但處理方式和額外類型有所不同。 1)全局對像在瀏覽器中為window，在Node.js中為global。 2)Node.js獨有Buffer對象，用於處理二進制數據。 3)性能和時間處理在兩者間也有差異，需根據環境調整代碼。

JavaScript評論：使用//和 / * * / * / * /May 13, 2025 pm 03:49 PM

JavaScriptusestwotypesofcomments:single-line(//)andmulti-line(//).1)Use//forquicknotesorsingle-lineexplanations.2)Use//forlongerexplanationsorcommentingoutblocksofcode.Commentsshouldexplainthe'why',notthe'what',andbeplacedabovetherelevantcodeforclari

Python vs. JavaScript：開發人員的比較分析May 09, 2025 am 12:22 AM

Python和JavaScript的主要區別在於類型系統和應用場景。 1.Python使用動態類型，適合科學計算和數據分析。 2.JavaScript採用弱類型，廣泛用於前端和全棧開發。兩者在異步編程和性能優化上各有優勢，選擇時應根據項目需求決定。

Python vs. JavaScript：選擇合適的工具May 08, 2025 am 12:10 AM

選擇Python還是JavaScript取決於項目類型：1)數據科學和自動化任務選擇Python；2)前端和全棧開發選擇JavaScript。 Python因其在數據處理和自動化方面的強大庫而備受青睞，而JavaScript則因其在網頁交互和全棧開發中的優勢而不可或缺。

Python和JavaScript：了解每個的優勢May 06, 2025 am 12:15 AM

Python和JavaScript各有優勢，選擇取決於項目需求和個人偏好。 1.Python易學，語法簡潔，適用於數據科學和後端開發，但執行速度較慢。 2.JavaScript在前端開發中無處不在，異步編程能力強，Node.js使其適用於全棧開發，但語法可能複雜且易出錯。

JavaScript的核心：它是在C還是C上構建的？May 05, 2025 am 12:07 AM

javascriptisnotbuiltoncorc; sanInterpretedlanguagethatrunsonenginesoftenwritteninc.1）JavascriptwasdesignedAsignedAsalightWeight，drackendedlanguageforwebbrowsers.2）Enginesevolvedfromsimpleterterpretpretpretpretpreterterpretpretpretpretpretpretpretpretpretcompilerers，典型地，替代品。

JavaScript應用程序：從前端到後端May 04, 2025 am 12:12 AM

JavaScript可用於前端和後端開發。前端通過DOM操作增強用戶體驗，後端通過Node.js處理服務器任務。 1.前端示例：改變網頁文本內容。 2.後端示例：創建Node.js服務器。

Python vs. JavaScript：您應該學到哪種語言？May 03, 2025 am 12:10 AM

選擇Python還是JavaScript應基於職業發展、學習曲線和生態系統：1)職業發展：Python適合數據科學和後端開發，JavaScript適合前端和全棧開發。 2)學習曲線：Python語法簡潔，適合初學者；JavaScript語法靈活。 3)生態系統：Python有豐富的科學計算庫，JavaScript有強大的前端框架。

See all articles