社群 學習 工具庫 休閒
搜尋
繁体中文
首頁 > web前端 > js教程 > JS實現購物車特效

JS實現購物車特效

高洛峰
發布： 2017-02-04 13:27:17
原創
1113 人瀏覽過

效果：

1.點選全選按鈕可以全選，再點選就全不選

2.點選數量 ‘ + ' ‘ -  ' 可以自動計算。並且合計保持更新。當數量大於1時‘ - '出現。小於等於1時‘ - '消失

3.點選刪除可以實現刪除功能。

4.點選全選旁的刪除按鈕可以全部刪除。

5.選好商品後點選已選商品，可以顯示選取的商品

6.選取的商品可以取消選取。 

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>购物车</title>
</head>
<style type="text/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-right: -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;
  /*border: 1px solid #ccc;*/
  margin-right: 10px;
  float: left;
}
 
.foot {
  width: 935px;
  margin-top: 10px;
  color: #666;
  height: 48px;
  border: 1px solid #c8c8c8;
  background-color: #eaeaea;
  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: "Microsoft Yahei";
  font-weight: bold;
}
.foot .selected {
  cursor: pointer;
}
.foot .selected .arrow {
  position: relative;
  top:-3px;
  margin-left: 3px;
}
.foot .selected .down {
  position: relative;
  top:3px;
  display: none;
}
 .show .selected .down {
  display: inline;
}
 .show .selected .up {
  display: none;
}
.foot .selected:hover .arrow {
  color: red;
}
.foot .selected-view {
  width: 935px;
  border: 1px solid #c8c8c8;
  position: absolute;
  height: auto;
  background: #ffffff;
  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: #ffffff;
  position: absolute;
  left: 0px;
  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: #ffffff;
  font-size: 12px;
  position: absolute;
  top: 0px;
  right: 0px;
  width: 60px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  background: RGBA(0,0,0,.5);
  cursor: pointer;
}
#selectedViewList div:hover span {
  display: block;
}
</style>
<body>
<table id="cartTable">
  <thead>
    <tr>
      <th><label><input class="check-all check" type="checkbox"/> 全选</label></th>
      <th>商品</th>
      <th>单价</th>
      <th>数量</th>
      <th>小计</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="checkbox"><input class="check-one check" type="checkbox"/></td>
      <td class="goods"><img src="http://cdn.attach.qdfuns.com/notes/pics/201612/21/075704loo2mdzuux5123gu.jpg.editor.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="http://cdn.attach.qdfuns.com/notes/pics/201612/21/075704m26zvv6e52sjczee.jpg.editor.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="http://cdn.attach.qdfuns.com/notes/pics/201612/21/075704etdabo2fpppdplsa.jpg.editor.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="http://cdn.attach.qdfuns.com/notes/pics/201612/21/075823wdtw1pdvf3wbwd8b.jpg.editor.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"/> 全选</label>
  <a class="fl delete" id="deleteAll" href="javascript:;">删除</a>
  <div class="fr closing">结 算</div>
  <div class="fr total">合计：￥<span id="priceTotal">0.00</span></div>
  <div class="fr selected" 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>
<script>
window.onload = function () {
  if (!document.getElementsByClassName) {
    document.getElementsByClassName = function (cls) {
      var ret = [];
      var els = document.getElementsByTagName(&#39;*&#39;);
      for (var i = 0, len = els.length; i < len; i++) {
        if (els[i].className === cls
          || els[i].className.indexOf(cls + &#39; &#39;) >= 0
          || els[i].className.indexOf(&#39; &#39; + cls + &#39; &#39;) >= 0
          || els[i].className.indexOf(&#39; &#39; + cls) >= 0) {
          ret.push(els[i]);
        }
      }
      return ret;
    }
  }
  var cartTable = document.getElementById(&#39;cartTable&#39;);
  var tr = cartTable.children[1].rows;
  var checkInputs = document.getElementsByClassName(&#39;check&#39;);
  var checkAllInputs = document.getElementsByClassName(&#39;check-all&#39;);
  var selectedTotal = document.getElementById(&#39;selectedTotal&#39;);
  var priceTotal = document.getElementById(&#39;priceTotal&#39;);
  var selected = document.getElementById(&#39;selected&#39;);
  var foot = document.getElementById(&#39;foot&#39;);
  var selectedViewList = document.getElementById(&#39;selectedViewList&#39;);
  var deleteAll = document.getElementById(&#39;deleteAll&#39;);
  //计算
  function getTotal() {
    var seleted = 0;
    var price = 0;
    var HTMLstr = &#39;&#39;;
    for (var i = 0, len = tr.length; i < len; i++) {
      if (tr[i].getElementsByTagName(&#39;input&#39;)[0].checked) {
        tr[i].className = &#39;on&#39;;
        seleted += parseInt(tr[i].getElementsByTagName(&#39;input&#39;)[1].value);
        price += parseFloat(tr[i].cells[4].innerHTML);
        HTMLstr += &#39;<div><img src="&#39; + tr[i].getElementsByTagName(&#39;img&#39;)[0].src + &#39;"><span class="del" index="&#39; + i + &#39;">取消选择</span></div>&#39;
      }
      else {
        tr[i].className = &#39;&#39;;
      }
    }
    selectedTotal.innerHTML = seleted;
    priceTotal.innerHTML = price.toFixed(2);
    selectedViewList.innerHTML = HTMLstr;
 
    if (seleted == 0) {
      foot.className = &#39;foot&#39;;
    }
  }
  //小计
  function getSubTotal(tr) {
    var tds = tr.cells;
    var price = parseFloat(tds[2].innerHTML);
    var count = parseInt(tr.getElementsByTagName(&#39;input&#39;)[1].value);
    var SubTotal = parseFloat(price * count);
    tds[4].innerHTML = SubTotal.toFixed(2);
  }
  for (var i = 0 , len = checkInputs.length; i < len; i++) {
    checkInputs[i].onclick = function () {
      if (this.className === &#39;check-all check&#39;) {
        for (var j = 0; j < checkInputs.length; j++) {
          checkInputs[j].checked = this.checked;
        }
      }
      if (this.checked == false) {
        for (var k = 0; k < checkAllInputs.length; k++) {
          checkAllInputs[k].checked = false;
        }
      }
      getTotal();
    }
  }
  selected.onclick = function () {
    if (foot.className == &#39;foot&#39;) {
      if (selectedTotal.innerHTML != 0) {
        foot.className = &#39;foot show&#39;;
      }
    }
    else {
      foot.className = &#39;foot&#39;;
    }
  }
  selectedViewList.onclick = function (e) {
    e = e || window.event;
    var el = e.srcElement;
    if (el.className == &#39;del&#39;) {
      var index = el.getAttribute(&#39;index&#39;);
      var input = tr[index].getElementsByTagName(&#39;input&#39;)[0];
      input.checked = false;
      input.onclick();
    }
  }
  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(&#39;input&#39;)[1];
      var val = parseInt(input.value);
      var reduce = this.getElementsByTagName(&#39;span&#39;)[1];
      switch (cls) {
        case &#39;add&#39;:
          input.value = val + 1;
          reduce.innerHTML = &#39;-&#39;;
          getSubTotal(this);
          break;
        case &#39;reduce&#39;:
          if (val > 1) {
            input.value = val - 1;
          }
          if (input.value <= 1) {
            reduce.innerHTML = &#39;&#39;;
          }
          getSubTotal(this);
          break;
        case &#39;delete&#39;:
          var conf = confirm(&#39;确定要删除吗？&#39;);
          if (conf) {
            this.parentNode.removeChild(this);
          }
          break
        default :
          break;
      }
      getTotal();
    }
    tr[i].getElementsByTagName(&#39;input&#39;)[1].onkeyup = function () {
      var val = parseInt(this.value);
      var tr = this.parentNode.parentNode
      var reduce = tr.getElementsByTagName(&#39;span&#39;)[1];
      if (isNaN(val) || val < 1) {
        val = 1;
      }
      this.value = val;
      if (val <= 1) {
        reduce.innerHTML = &#39;&#39;;
      }
      else {
        reduce.innerHTML = &#39;-&#39;;
      }
      getSubTotal(tr);
      getTotal();
    }
  }
  deleteAll.onclick = function () {
    if (selectedTotal.innerHTML != &#39;0&#39;) {
      var conf = confirm(&#39;确定删除吗？&#39;);
      if (conf) {
        for (var i = 0; i < tr.length; i++) {
          var input = tr[i].getElementsByTagName(&#39;input&#39;)[0];
          if (input.checked) {
            tr[i].parentNode.removeChild(tr[i]);
            i--;
          }
        }
      }
    }
  }
  checkAllInputs[0].checked = true;
  checkAllInputs[0].onclick();
}
</script>
</body>
</html>
登入後複製

以上就是本文的全部內容，希望本文的內容對大家的學習或工作能帶來一定的幫助，同時也希望多多支持PHP中文網！

更多JS實現購物車特效相關文章請關注PHP中文網！

相關標籤：
js 购物车
來源：php.cn
上一篇：Extjs優化(二)Form表單提交通用實現 下一篇：JavaScript編寫一個簡易購物車功能
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
為什麼「Cookie」請求頭中的cookie數量超過「set-cookie」回應頭中設定的cookie數量？ 我是網路爬蟲的新手，所以我對http請求的了解很淺。當我檢查我發送到某個網站的某些請求時，例如添加到購物車，開發工具中顯示請求的「Cookie」頭中有更多的值，這些值是由「set-...
來自於 2024-04-05 14:52:06
0
1
3571
jQuery.remove() 和 array.splice() 問題 所以我有一個頁面，其中有一個項目清單和一個購物清單。如果您將項目清單中的x個項目新增至購物清單中，請嘗試透過點擊購物清單中的項目並在開啟它的模式上點擊刪除來逐一刪除它們-第一次。現...
來自於 2024-04-04 17:21:35
0
1
347
取得特定移除商品的購物車商品鍵ID：WooCommerce購物車 在WooCommerce中，我有一個自訂cart.php模板，我需要在其中檢查刪除的產品（項目）是否是獨一無二的，然後根據該資訊進一步編碼。有沒有一種方法可以在不使用鉤子的情況下找...
來自於 2024-04-04 16:35:18
0
1
282
WooCommerce Checkout - 驗證使用者角色和購物車內容 我在WooCommerce的結帳流程方面面臨挑戰。我使用“B2BforWooCommerce”插件來區分常規產品和B2B產品。場景如下：1-未註冊的訪客將「常規」類別中的產品（預設...
來自於 2024-04-03 11:58:52
0
1
475
選擇「本地自取」作為送貨選項時避免使用優惠券 我使用的代碼可以在購物車和結帳時選擇“本地取貨”時增加折扣。 /***DiscountforLocalPickup*/add_action('woocommerce_cart_ca...
來自於 2024-04-02 17:42:54
0
1
355
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板