JavaScript實(shí)現(xiàn)類似淘寶的購物車效果的方法

小編給大家分享一下JavaScript實(shí)現(xiàn)類似淘寶的購物車效果的方法，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

前言

相信大家都很熟悉商品購物車這一功能，每當(dāng)我們?cè)谀硨毮硸|上購買商品的時(shí)候，看中了哪件商品，就會(huì)加入購物車中，最后結(jié)算。購物車這一功能，方便消費(fèi)者對(duì)商品進(jìn)行管理，可以添加商品，刪除商品，選中購物車中的某一項(xiàng)或幾項(xiàng)商品，最后商品總價(jià)也會(huì)隨著消費(fèi)者的操作隨著變化。本文介紹的是通過JavaScript實(shí)現(xiàn)類似于淘寶的購物車效果，包括商品的單選、全選、刪除、修改數(shù)量、價(jià)格計(jì)算、數(shù)目計(jì)算、預(yù)覽等功能。

功能如下

      1. 實(shí)現(xiàn)兼容低版本IE的getElementsByClassName()方法

      2. JS表格操作

      3. 通過parseInt() ，parseFloat()把字符串轉(zhuǎn)換成數(shù)字

      4. 通過toFixed()把數(shù)字格式化成指定位數(shù)的小數(shù)

      5. 事件代理的運(yùn)用

效果圖：

border-collapse有兩個(gè)值可以選擇，分別是collapse和separate，就是合并邊框和分離邊框，分離邊框之下又可以設(shè)置間距和邊框樣式

border-spacing:2em 4em;（設(shè)置右間距和下間距）

border-style:none solid dashed dotted;（分別設(shè)置上右下左的樣式）

html結(jié)構(gòu)：

<table id="cartTable">
 <thead>
 <tr>
 <th><label><input class="check-all check" type="checkbox"/>&nbsp;全選</label></th>
 <th>商品</th>
 <th>單價(jià)</th>
 <th>數(shù)量</th>
 <th>小計(jì)</th>
 <th>操作</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
 <td class="goods"><img src="images/1.jpg" alt="" /><span>Casio/卡西歐 EX-TR350</span></td>
 <td class="price">5999.88</td>
 <td class="count"><span class="reduce"></span><input class="count-input" type="text" value="1"/><span class="add">+</span></td>
 <td class="subtotal">5999.88</td>
 <td class="operation"><span class="delete">刪除</span></td>
 </tr>
 <tr>
 <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
 <td class="goods"><img src="images/2.jpg" alt="" /><span>Canon/佳能 PowerShot SX50 HS</span></td>
 <td class="price">3888.50</td>
 <td class="count"><span class="reduce"></span><input class="count-input" type="text" value="1"/><span class="add">+</span></td>
 <td class="subtotal">3888.50</td>
 <td class="operation"><span class="delete">刪除</span></td>
 </tr>
 <tr>
 <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
 <td class="goods"><img src="images/3.jpg" alt="" /><span>Sony/索尼 DSC-WX300</span></td>
 <td class="price">1428.50</td>
 <td class="count"><span class="reduce"></span><input class="count-input" type="text" value="1"/><span class="add">+</span></td>
 <td class="subtotal">1428.50</td>
 <td class="operation"><span class="delete">刪除</span></td>
 </tr>
 <tr>
 <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
 <td class="goods"><img src="images/4.jpg" alt="" /><span>Fujifilm/富士 instax mini 25</span></td>
 <td class="price">640.60</td>
 <td class="count"><span class="reduce"></span><input class="count-input" type="text" value="1"/><span class="add">+</span></td>
 <td class="subtotal">640.60</td>
 <td class="operation"><span class="delete">刪除</span></td>
 </tr>
 </tbody>
</table>
<div class="foot" id="foot">
 <label class=" fl select-all"><input type="checkbox" class="check-all check" />&nbsp;全選</label>
 <a class="fl delete" id="deleteAll" href="javascript:;" rel="external nofollow" >刪除</a>
 <div class="fr closing">結(jié) 算</div>
 <div class="fr total">合計(jì)：￥<span id="priceTotal">0.00</span></div>
 <div class="fr select" id="selected">已選商品<span id="selectedTotal">0</span>件<span class="arrow up">︽</span><span class="arrow down">︾</span></div>
 <div class="selected-view">
 <div id="selectedViewList" class="clearfix">
 <div><img src="images/1.jpg"><span>取消選擇</span></div>
 </div>
 <span class="arrow">◆<span>◆</span></span>
 </div>
</div>

css代碼：

*{
 margin: 0;
 padding: 0;
 }
 a{
 color: #666;
 text-decoration: none;
 }
 body{
 padding:20px;
 color: #666;
 }
 .fl{
 float: left;
 }
 .fr{
 float: right;
 }
 table{
 border-collapse: collapse;
 border-spacing: 0;
 border: 0;
 text-align: center;
 width: 937px;
 }
 th,td{
 border: 1px solid #cadeff;
 }
 th{
 background: #e2f2ff;
 border-top: 3px solid #a7cbff;
 height: 30px;
 }
 td{
 padding: 10px;
 color: #444;
 }
 tbody tr:hover{
 background: RGB(238,246,255);
 }
 .checkbox{width: 60px;}
 .goods{width: 300px;}
 .goods span{
 width: 180px;
 margin-top: 20px;
 text-align: left;
 float: left;
 }
 .price{width: 130px;}
 .count{width: 90px;}
 .count .add, .count input, .count .reduce{
 float: left;
 margin-left: -1px;
 position: relative;
 z-index: 0;
 }
 .count .add, .count .reduce{
 height: 23px;
 width: 17px;
 border: 1px solid #e5e5e5;
 background: #f0f0f0;
 text-align: center;
 line-height: 23px;
 color: #444;
 }
 .count .add:hover, .count .reduce:hover{
 color: #f50;
 z-index: 3;
 border-color: #f60;
 cursor: pointer;
 }
 .count input{
 width: 50px;
 height: 15px;
 line-height: 15px;
 border: 1px solid #aaa;
 color: #343434;
 text-align: center;
 padding: 4px 0;
 background-color: #fff;
 z-index: 2;
 }
 .subtotal{
 width: 150px;
 color: red;
 font-weight: bold;
 }
 .operation{width: 80px;}
 .operation span:hover, .a:hover{
 cursor: pointer;
 color: red;
 text-decoration: underline;
 }
 img{
 width: 100px;
 height: 80px;
 margin-right: 10px;
 float: left;
 }
 .foot{
 width: 935px;
 margin-top: 10px;
 color: #666;
 height: 48px;
 border: 1px solid #c8c8c8;
 background-image: linear-gradient(RGB(241,241,241),RGB(226,226,226));
 position: relative;
 z-index: 8;
 }
 .foot div, .foot a{
 line-height: 48px;
 height: 48px;
 }
 .foot .select-all{
 width: 100px;
 height: 48px;
 line-height: 48px;
 padding-left: 5px;
 color: #666;
 }
 .foot .closing{
 border-left: 1px solid #c8c8c8;
 width: 100px;
 text-align: center;
 color: #000;
 font-weight: bold;
 background: RGB(238,238,238);
 cursor: pointer;
 }
 .foot .total{
 margin: 0 20px;
 cursor: pointer;
 }
 .foot #priceTotal, .foot #selectedTotal{
 color: red;
 font-family: "微軟雅黑";
 font-weight: bold;
 }
 .foot .select{
 cursor: pointer;
 }
 .foot .select .arrow{
 position: relative;
 top: -3px;
 margin-left: 3px;
 }
 .foot .select .down{
 position: relative;
 top: 3px;
 display: none;
 }
 .show .select .down{
 display: inline;
 }
 .show .select .up{
 display: none;
 }
 .foot .select:hover .arrow{
 color: red;
 }
 .foot .selected-view{
 width: 935px;
 border: 1px solid #c8c8c8;
 position: absolute;
 height: auto;
 background: #fff;
 z-index: 9;
 bottom: 48px;
 left: -1px;
 display: none;
 }
 .show .selected-view{display: block;}
 .foot .selected-view div{height: auto;}
 .foot .selected-view .arrow{
 font-size: 16px;
 line-height: 100%;
 color: #c8c8c8;
 position: absolute;
 right: 330px;
 bottom: -9px;
 }
 .foot .selected-view .arrow span{
 color: #fff;
 position: absolute;
 left: 0;
 bottom: 1px;
 }
 #selectedViewList{
 padding: 20px;
 margin-bottom: -20px;
 }
 #selectedViewList div{
 display: inline-block;
 position: relative;
 width: 100px;
 height: 80px;
 border: 1px solid #ccc;
 margin: 10px;
 }
 #selectedViewList div span{
 display: none;
 color: #fff;
 font-size: 12px;
 position: absolute;
 top: 0;
 right: 0;
 width: 60px;
 height: 18px;
 line-height: 18px;
 text-align: center;
 background: RGBA(0,0,0,.5);
 cursor: pointer;
 }
 #selectedViewList div:hover span{
 display: block;
 }

js部分：

1）實(shí)現(xiàn)商品的全選功能及數(shù)量和價(jià)格的計(jì)算

var cartTable = document.getElementById('cartTable');
 var tr = cartTable.children[1].rows;//獲取table下的tbody下的每一行
 var checkInputs = document.getElementsByClassName('check');
 var checkAllInputs = document.getElementsByClassName('check-all');
 var selectedTotal = document.getElementById('selectedTotal');
 var priceTotal = document.getElementById('priceTotal');
 //計(jì)算總數(shù)和價(jià)格
 function getTotal(){
 var selected = 0;
 var price = 0;
 for(var i=0;i < tr.length; i++){
 if(tr[i].getElementsByTagName('input')[0].checked){
  selected += parseInt(tr[i].getElementsByTagName('input')[1].value);
  price += parseFloat(tr[i].cells[4].innerHTML);//cells屬性為獲得tr下面的td
 }
 }
 selectedTotal.innerHTML = selected;
 priceTotal.innerHTML = price.toFixed(2);//保留兩位小數(shù)
 }
 for(var i=0;i<checkInputs.length;i++){
 checkInputs[i].onclick = function(){
 if(this.className === 'check-all check'){//如果點(diǎn)擊的是全選按鈕，則使所有按鈕的狀態(tài)和它相同
  for(var j=0;j<checkInputs.length;j++){
  checkInputs[j].checked = this.checked;
  }
 }
 if(this.checked == false){//如果其中一個(gè)變?yōu)槲催x中狀態(tài)，則使全選按鈕取消選中
  for(var i=0;i<checkAllInputs.length;i++){
  checkAllInputs[i].checked = false;
  }
 }
 getTotal();
 }
 }

2)點(diǎn)擊已選商品實(shí)現(xiàn)商品預(yù)覽浮層的功能

點(diǎn)擊已選商品時(shí)會(huì)顯示出已選擇商品的列表

同時(shí)在getTotal()函數(shù)中增加新創(chuàng)建的div

js代碼：

function getTotal(){
 var selected = 0;
 var price = 0;
 var HTMLstr = '';
 for(var i=0;i < tr.length; i++){
 if(tr[i].getElementsByTagName('input')[0].checked){
  tr[i].className = 'on';
  selected += parseInt(tr[i].getElementsByTagName('input')[1].value);
  price += parseFloat(tr[i].cells[4].innerHTML);//cells屬性為獲得tr下面的td
  HTMLstr += '<div><img src="'+ tr[i].getElementsByTagName('img')[0].src + '"><span>取消選擇</span></div>';
 }
 else{
  tr[i].className = '';
 }
 }
 selectedTotal.innerHTML = selected;
 priceTotal.innerHTML = price.toFixed(2);//保留兩位小數(shù)
 selectedViewList.innerHTML = HTMLstr;
 if(selected == 0){
 foot.className = 'foot';
 }
 }
 for(var i=0;i<checkInputs.length;i++){
 checkInputs[i].onclick = function(){
 if(this.className === 'check-all check'){//如果點(diǎn)擊的是全選按鈕，則使所有按鈕的狀態(tài)和它相同
  for(var j=0;j<checkInputs.length;j++){
  checkInputs[j].checked = this.checked;
  }
 }
 if(this.checked == false){//如果其中一個(gè)變?yōu)槲催x中狀態(tài)，則使全選按鈕取消選中
  for(var i=0;i<checkAllInputs.length;i++){
  checkAllInputs[i].checked = false;
  }
 }
 getTotal();
 }
 }

 selected.onclick = function(){
 if(foot.className == 'foot'){
 if(selectedTotal.innerHTML != 0){
  foot.className = 'foot show';
 }
 }else{
 foot.className = 'foot';
 }
 }

 3)商品列表中的取消選擇與事件代理

已選商品列表中沒有appendChild的時(shí)候div和span都不存在，所以要使用事件代理。

selectedViewList.onclick = function(e){
  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();
  }
 }

4）實(shí)現(xiàn)增減商品數(shù)量及小計(jì)價(jià)格的計(jì)算

//增減商品數(shù)量事件代理
 for(var i=0;i<tr.length;i++){
  tr[i].onclick = function(e){
  e = e|| window.event;
  var el = e.srcElement;
  var cls = el.className;
  var input = this.getElementsByTagName('input')[1];
  var val = parseInt(input.value);
  var reduce = this.getElementsByTagName('span')[1];
  switch (cls){
   case 'add':
   input.value = val + 1;
   reduce.innerHTML = '-';
    getsubTotal(this);
   break;
   case 'reduce':
   if(val > 1){
    input.value = val - 1;
    getsubTotal(this);
   }else{
    reduce.innerHTML = '';
   }
  }
  getTotal();
  }
  tr[i].getElementsByTagName('input')[1].onkeyup = function(){
  var val = parseInt(this.value);
  var tr = this.parentNode.parentNode;//this指的是當(dāng)前的input，其父節(jié)點(diǎn)的父節(jié)點(diǎn)就是當(dāng)前的tr
  var reduce = tr.getElementsByTagName('span')[1];
  if(isNaN(val) || val < 1){
   val = 1;
  }
  this.value = val;//保證輸入框中都是大于1的純數(shù)字
  if(val <= 1){
   reduce.innerHTML = '';
  }
  else{
   reduce.innerHTML = '-';
  }
  getsubTotal(tr);
  getTotal();
  }
 }

 5）實(shí)現(xiàn)刪除商品功能

學(xué)會(huì)用for循環(huán)刪除數(shù)組中的一些數(shù)據(jù)時(shí)要回置下標(biāo) i 。

//刪除商品
 deleteAll.onclick = function(){
  if(selectedTotal.innerHTML != '0'){
  var conf = confirm("確定要?jiǎng)h除所選商品嗎");
  if(conf){
   for(var i=0;i<tr.length;i++){
   var input = tr[i].getElementsByTagName('input')[0];
   if(input.checked){
    tr[i].parentNode.removeChild(tr[i]);
    i --;//因?yàn)閯h除數(shù)組中的一個(gè)后，后面的索引就會(huì)向前移，此時(shí)要讓i也向前移一個(gè)，回置下標(biāo)i
   }
   }
   getTotal();
  }
  }
 }

看完了這篇文章，相信你對(duì)“JavaScript實(shí)現(xiàn)類似淘寶的購物車效果的方法”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！