原生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/imghw/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/imghw/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/imghw/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/imghw/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/imghw/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/imghw/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;
 
}

登入後複製

dsr9鑑，從中得到收穫。

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

php新手購物車實現的原理

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

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

本網站聲明

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

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

熱工具

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

gmail信箱登陸入口在哪裡

7843

Java教學

1649

CakePHP 教程

1403

Laravel 教程

1300

PHP教程

1240

Related knowledge

PHP實作購物車功能 Jun 22, 2023 am 09:00 AM

在我們日常生活中，網上購物已成為非常普遍的消費方式，而購物車功能也是網上購物的重要組成部分之一。那麼，本文將為大家介紹如何利用PHP語言來實現購物車的相關功能。一、技術背景購物車是一種線上購物網站常見的功能。當使用者在一個網站上瀏覽一些商品，他們可以將這些商品添加到一個虛擬的購物車中，以便於在後續的結帳過程中選擇和管理。購物車通常包括以下基本功能：新增商品：

Java中如何實作一個簡單的購物車功能？ Nov 02, 2023 am 11:56 AM

Java中如何實作一個簡單的購物車功能？購物車是線上商店的重要功能，它允許用戶將想要購買的商品添加到購物車中，並對商品進行管理。在Java中，我們可以透過使用物件導向的方式來實作一個簡單的購物車功能。首先，我們需要定義一個商品類。此類別包含商品的名稱、價格和數量等屬性，以及對應的Getter和Setter方法。例如：publicclassProduct

實戰教學：PHP與MySQL實作購物車功能詳解 Mar 15, 2024 pm 12:27 PM

實戰教學：PHP和MySQL實現購物車功能詳解購物車功能是網站開發中常見的功能之一，透過購物車使用者可以輕鬆地將想要購買的商品加入購物車，然後進行結算和付款。在這篇文章中，我們將詳細介紹如何使用PHP和MySQL實作一個簡單的購物車功能，並提供具體的程式碼範例。建立資料庫和資料表首先需要在MySQL資料庫中建立一個用來儲存商品資訊的資料表。以下是一個簡單的數據表

如何利用Redis和JavaScript實現購物車功能 Sep 21, 2023 pm 01:27 PM

如何利用Redis和JavaScript實現購物車功能購物車是電商網站中非常常見的功能之一，它允許用戶將感興趣的商品添加到購物車中，方便用戶隨時查看和管理購買的商品。在本文中，我們將介紹如何利用Redis和JavaScript實現購物車功能，並提供具體的程式碼範例。一、準備工作在開始之前，我們需要確保已經安裝並配置Redis，可以透過官方網站[https:/

如何使用PHP實現一個簡單的購物車功能 Sep 24, 2023 am 09:13 AM

如何使用PHP實現一個簡單的購物車功能購物車功能是電子商務網站中必不可少的一部分，它允許用戶將感興趣的商品添加到購物車中，隨後可以進行結算或繼續瀏覽和添加商品。本文將介紹如何使用PHP實作一個簡單的購物車功能，並提供具體的程式碼範例。建立資料庫和表格首先，我們需要建立一個資料庫和一個用於儲存購物車資料的表。 CREATEDATABASEshopping_ca

如何在MySQL中設計商城的購物車錶結構？ Oct 30, 2023 pm 02:12 PM

如何在MySQL中設計商城的購物車錶結構？隨著電子商務的快速發展，購物車已成為線上商城的重要組成部分。購物車用於保存用戶選購的商品和相關信息，為用戶提供方便快捷的購物體驗。在MySQL中設計一個合理的購物車錶結構，可以幫助開發人員有效地儲存和管理購物車資料。本文將介紹如何在MySQL中設計商城的購物車錶結構，以及提供一些具體的程式碼範例。首先，購物車表應該包含以

PHP商城開發技巧：設計購物車與訂單同步功能 Jul 30, 2023 pm 07:22 PM

PHP商城開發技巧：設計購物車和訂單同步功能在一個商城網站中，購物車和訂單是不可或缺的功能。購物車用於用戶選購商品並儲存到臨時購物車中，而訂單則是用戶確認購買商品後產生的記錄。為了提升使用者體驗和減少錯誤，設計一個購物車和訂單同步的功能非常重要。一、購物車和訂單的概念購物車通常是一個臨時的容器，用於保存用戶選購的商品。用戶可以將商品加入購物車，方便瀏覽和管理。

如何實現購物車數量提醒功能的Java開關買菜系統 Nov 04, 2023 am 09:03 AM

如何實現購物車數量提醒功能的Java開關買菜系統隨著網路的快速發展，電子商務越來越普及。越來越多的人開始透過手機或電腦網頁購物，享受便利、有效率的購物體驗。在購物過程中，購物車是個必備的工具，它方便使用者把自己喜歡的商品放入一個臨時的「購物籃」中，待確認下單時再結算。然而，在網購的過程中，有時候用戶會忘記購物車中已經有幾個商品了。所以在設計一個購物車

See all articles

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

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題