原生js模拟淘宝购物车项目实战-tutorial js-php.cn

Rumah

hujung hadapan web

tutorial js

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

高洛峰

Mar 15, 2017 pm 04:22 PM

js asli troli beli-belah

本文实例讲述了原生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="./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>

Salin selepas log masuk

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="&#39;+ tr[i].getElementsByTagName(&#39;img&#39;)[0].src +&#39;"><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>

Salin selepas log masuk

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;
 
}

Salin selepas log masuk

以上就是js模拟淘宝购物车的全部项目代码，欢迎大家学习品鉴，从中得到收获。

更多原生js模拟淘宝购物车项目实战相关文章请关注PHP中文网！

php新手购物车实现的原理

jQuery基于json与cookie实现购物车的方法

js实现简单的购物车有图有代码

php 实现简单加入购物车的图文代码详细介绍

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

Menjana ai hentai secara percuma.

Tunjukkan Lagi

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)

1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Tetapan grafik terbaik

1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Penyelesaian Riddle Seashell

3 minggu yang lalu By DDD

Apa yang Baru di Windows 11 KB5054979 & Cara Memperbaiki Masalah Kemas Kini

2 minggu yang lalu By DDD

Akan R.E.P.O. Ada Crossplay?

1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Tunjukkan Lagi

Alat panas

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Tunjukkan Lagi

Topik panas

Di manakah pintu masuk log masuk untuk e-mel gmail?

7552

Tutorial CakePHP

1382

Apakah format nama akaun stim

kunci pengaktifan win11 kekal

Sambungan NYT menunjukkan dan jawapan

Tunjukkan Lagi

Related knowledge

Bagaimana untuk melaksanakan fungsi troli beli-belah yang mudah di Jawa? Nov 02, 2023 am 11:56 AM

Bagaimana untuk melaksanakan fungsi troli beli-belah yang mudah di Jawa? Troli beli-belah ialah ciri penting kedai dalam talian, yang membolehkan pengguna menambah item yang mereka ingin beli pada troli beli-belah dan mengurus item. Di Jawa, kita boleh melaksanakan fungsi troli beli-belah yang mudah dengan menggunakan pendekatan berorientasikan objek. Pertama, kita perlu menentukan kategori produk. Kelas ini mengandungi atribut seperti nama produk, harga dan kuantiti, serta kaedah Getter dan Setter yang sepadan. Contohnya: publicclassProduct

PHP melaksanakan fungsi troli beli-belah Jun 22, 2023 am 09:00 AM

Dalam kehidupan seharian kita, membeli-belah dalam talian telah menjadi cara penggunaan yang sangat biasa, dan fungsi troli beli-belah juga merupakan salah satu komponen penting dalam membeli-belah dalam talian. Jadi, artikel ini akan memperkenalkan cara menggunakan bahasa PHP untuk melaksanakan fungsi berkaitan troli beli-belah. 1. Latar belakang teknikal Troli beli-belah adalah fungsi biasa di laman web beli-belah dalam talian. Apabila pengguna menyemak imbas beberapa produk di tapak web, mereka boleh menambahkan item ini pada troli beli-belah maya untuk pemilihan dan pengurusan yang mudah semasa proses daftar keluar berikutnya. Troli beli-belah biasanya mengandungi fungsi asas berikut: Tambah item:

Tutorial praktikal: Penjelasan terperinci tentang fungsi troli beli-belah dengan PHP dan MySQL Mar 15, 2024 pm 12:27 PM

Tutorial praktikal: Penjelasan terperinci tentang fungsi troli beli-belah dengan PHP dan MySQL Fungsi troli beli-belah adalah salah satu fungsi biasa dalam pembangunan laman web Melalui troli beli-belah, pengguna boleh menambah barang yang ingin dibeli ke troli beli-belah, dan kemudian teruskan dengan penyelesaian dan pembayaran. Dalam artikel ini, kami akan memperincikan cara melaksanakan fungsi troli beli-belah yang mudah menggunakan PHP dan MySQL dan memberikan contoh kod khusus. Untuk mencipta pangkalan data dan jadual data, anda perlu mencipta jadual data dalam pangkalan data MySQL terlebih dahulu untuk menyimpan maklumat produk. Berikut ialah jadual data ringkas

Kemahiran pembangunan pusat membeli-belah PHP: Reka bentuk troli beli-belah dan fungsi penyegerakan pesanan Jul 30, 2023 pm 07:22 PM

Kemahiran pembangunan pusat membeli-belah PHP: Reka bentuk keranjang beli-belah dan fungsi penyegerakan pesanan Dalam laman web pusat membeli-belah, troli beli-belah dan pesanan adalah fungsi yang sangat diperlukan. Troli beli-belah digunakan untuk pengguna membeli produk dan menyimpannya ke troli beli-belah sementara, manakala pesanan ialah rekod yang dihasilkan selepas pengguna mengesahkan pembelian produk tersebut. Untuk meningkatkan pengalaman pengguna dan mengurangkan ralat, adalah sangat penting untuk mereka bentuk troli beli-belah dan fungsi penyegerakan pesanan. 1. Konsep Troli Beli-belah dan Tempahan Troli beli-belah biasanya merupakan bekas sementara yang digunakan untuk menyimpan barang yang dibeli oleh pengguna. Pengguna boleh menambah produk pada troli beli-belah untuk penyemakan imbas dan pengurusan yang mudah.

Cara melaksanakan fungsi troli beli-belah menggunakan Redis dan JavaScript Sep 21, 2023 pm 01:27 PM

Cara menggunakan Redis dan JavaScript untuk melaksanakan fungsi troli beli-belah adalah salah satu fungsi yang sangat biasa dalam tapak web e-dagang menguruskan barang yang dibeli pada bila-bila masa. Dalam artikel ini, kami akan memperkenalkan cara menggunakan Redis dan JavaScript untuk melaksanakan fungsi troli beli-belah dan memberikan contoh kod khusus. 1. Persediaan Sebelum memulakan, kita perlu memastikan bahawa Redis telah dipasang dan dikonfigurasikan, yang boleh dilakukan melalui laman web rasmi [https:/

Bagaimana untuk mereka bentuk struktur meja troli beli-belah pusat membeli-belah di MySQL? Oct 30, 2023 pm 02:12 PM

Bagaimana untuk mereka bentuk struktur meja troli beli-belah pusat membeli-belah di MySQL? Dengan perkembangan pesat e-dagang, troli beli-belah telah menjadi bahagian penting dalam pusat membeli-belah dalam talian. Troli beli-belah digunakan untuk menyimpan produk yang dibeli oleh pengguna dan maklumat berkaitan, memberikan pengguna pengalaman membeli-belah yang mudah dan pantas. Mereka bentuk struktur jadual troli beli-belah yang munasabah dalam MySQL boleh membantu pembangun menyimpan dan mengurus data troli beli-belah dengan berkesan. Artikel ini akan memperkenalkan cara mereka bentuk struktur meja troli beli-belah pusat membeli-belah dalam MySQL dan menyediakan beberapa contoh kod khusus. Pertama, meja troli beli-belah hendaklah mengandungi

Bagaimana untuk melaksanakan fungsi troli beli-belah yang mudah menggunakan PHP Sep 24, 2023 am 09:13 AM

Cara menggunakan PHP untuk melaksanakan fungsi troli beli-belah yang ringkas Fungsi troli beli-belah merupakan bahagian penting dalam tapak web e-dagang Ia membolehkan pengguna menambah item yang diminati pada troli beli-belah, dan kemudian meneruskan ke daftar keluar atau meneruskan menyemak imbas dan menambah item. . Artikel ini akan memperkenalkan cara menggunakan PHP untuk melaksanakan fungsi troli beli-belah yang mudah dan memberikan contoh kod khusus. Mencipta pangkalan data dan jadual Pertama, kita perlu mencipta pangkalan data dan jadual untuk menyimpan data troli beli-belah. CREATEDATABASEshopping_ca

Bagaimana untuk melaksanakan sistem beli-belah runcit suis Java dengan fungsi peringatan kuantiti troli beli-belah Nov 04, 2023 am 09:03 AM

Bagaimana untuk merealisasikan sistem beli-belah runcit Java dengan fungsi peringatan kuantiti troli beli-belah Dengan perkembangan pesat Internet, e-dagang menjadi semakin popular. Semakin ramai orang mula membeli-belah melalui telefon mudah alih atau halaman web komputer, menikmati pengalaman membeli-belah yang mudah dan cekap. Dalam proses membeli-belah, troli beli-belah adalah alat yang sangat diperlukan Ia memudahkan pengguna untuk meletakkan produk kegemaran mereka ke dalam "bakul beli-belah" sementara dan kemudian meneruskan penyelesaian apabila pesanan disahkan. Walau bagaimanapun, semasa proses membeli-belah dalam talian, kadangkala pengguna terlupa bahawa terdapat beberapa item dalam troli beli-belah. Jadi apabila mereka bentuk keranjang belanja

See all articles