Native js simulation Taobao shopping cart project actual combat-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

Native js simulation Taobao shopping cart project actual combat

高洛峰

Mar 15, 2017 pm 04:22 PM

Native jsshopping cart

The example in this article describes the native js simulation Taobao shopping cart implementation code. Share it with everyone for your reference. The details are as follows:

Use JavaScript to achieve a shopping cart effect similar to Taobao, including the implementation of functions such as single selection, all selection, deletion, modification of quantity, price calculation, quantity calculation, preview, etc. Implemented renderings:

Native js simulation Taobao shopping cart project actual combat

Corresponding code:

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="Native js simulation Taobao shopping cart project actual combat" ><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="Native js simulation Taobao shopping cart project actual combat" ><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="Native js simulation Taobao shopping cart project actual combat" ><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="Native js simulation Taobao shopping cart project actual combat" ><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="Native js simulation Taobao shopping cart project actual combat" ><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="Native js simulation Taobao shopping cart project actual combat" ><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>

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: &#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;
 
}

The above is all the project code for js to simulate Taobao shopping cart. Everyone is welcome to learn and appreciate it and gain something from it.

For more native js simulation Taobao shopping cart project related articles, please pay attention to the PHP Chinese website!

Principles of novice shopping cart implementation in php

jQuery method of implementing shopping cart based on json and cookie

js implements a simple shopping cart with pictures and codes

php implements simple joining Detailed introduction to the graphic code of the shopping cart

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Java中如何实现一个简单的购物车功能？Nov 02, 2023 am 11:56 AM

Java中如何实现一个简单的购物车功能？购物车是在线商店的一个重要功能，它允许用户将想要购买的商品添加到购物车中，并对商品进行管理。在Java中，我们可以通过使用面向对象的方式来实现一个简单的购物车功能。首先，我们需要定义一个商品类。该类包含商品的名称、价格和数量等属性，以及相应的Getter和Setter方法。例如：publicclassProduct

PHP实现购物车功能Jun 22, 2023 am 09:00 AM

在我们日常生活中，网上购物已经成为非常普遍的消费方式，而购物车功能也是网上购物的重要组成部分之一。那么，本文将为大家介绍如何利用PHP语言来实现购物车的相关功能。一、技术背景购物车是一种在线购物网站常见的功能。当用户在一个网站上浏览一些商品，他们可以将这些商品添加到一个虚拟的购物车中，以便于在后续的结账过程中选择和管理。购物车通常包括以下基本功能：添加商品：

如何利用Redis和JavaScript实现购物车功能Sep 21, 2023 pm 01:27 PM

如何利用Redis和JavaScript实现购物车功能购物车是电商网站中非常常见的功能之一，它允许用户将感兴趣的商品添加到购物车中，方便用户随时查看和管理购买的商品。在本文中，我们将介绍如何利用Redis和JavaScript实现购物车功能，并提供具体的代码示例。一、准备工作在开始之前，我们需要确保已经安装并配置好Redis，可以通过官方网站[https:/

PHP商城开发技巧：设计购物车和订单同步功能Jul 30, 2023 pm 07:22 PM

PHP商城开发技巧：设计购物车和订单同步功能在一个商城网站中，购物车和订单是不可或缺的功能。购物车用于用户选购商品并保存到临时购物车中，而订单则是用户确认购买商品后生成的记录。为了提升用户体验和减少错误，设计一个购物车和订单同步的功能非常重要。一、购物车和订单的概念购物车通常是一个临时的容器，用于保存用户选购的商品。用户可以将商品加入购物车，方便浏览和管理。

实战教程：PHP和MySQL实现购物车功能详解Mar 15, 2024 pm 12:27 PM

实战教程：PHP和MySQL实现购物车功能详解购物车功能是网站开发中常见的功能之一，通过购物车用户可以方便地将想要购买的商品加入购物车，然后进行结算和支付。在这篇文章中，我们将详细介绍如何使用PHP和MySQL实现一个简单的购物车功能，并提供具体的代码示例。创建数据库和数据表首先需要在MySQL数据库中创建一个用来存储商品信息的数据表。以下是一个简单的数据表

如何在MySQL中设计商城的购物车表结构？Oct 30, 2023 pm 02:12 PM

如何在MySQL中设计商城的购物车表结构？随着电子商务的快速发展，购物车已成为在线商城的重要组成部分。购物车用于保存用户选购的商品和相关信息，为用户提供方便快捷的购物体验。在MySQL中设计一个合理的购物车表结构，可以帮助开发人员有效存储和管理购物车数据。本文将介绍如何在MySQL中设计商城的购物车表结构，以及提供一些具体的代码示例。首先，购物车表应该包含以

如何使用PHP实现一个简单的购物车功能Sep 24, 2023 am 09:13 AM

如何使用PHP实现一个简单的购物车功能购物车功能是电子商务网站中必不可少的一部分，它允许用户将感兴趣的商品添加到购物车中，随后可以进行结算或继续浏览和添加商品。本文将介绍如何使用PHP实现一个简单的购物车功能，并提供具体的代码示例。创建数据库和表格首先，我们需要创建一个数据库和一个用于存储购物车数据的表。CREATEDATABASEshopping_ca

如何实现购物车数量提醒功能的Java开关买菜系统Nov 04, 2023 am 09:03 AM

如何实现购物车数量提醒功能的Java开关买菜系统随着互联网的迅速发展，电子商务越来越普及。越来越多的人开始通过手机或电脑网页购物，享受便利、高效的购物体验。在购物过程中，购物车是一个必不可少的工具，它方便用户把自己喜欢的商品放入一个临时的“购物篮”中，待确认下单时再进行结算。然而，在网购的过程中，有时候用户会忘记购物车中已经有几个商品了。所以在设计一个购物车

See all articles