Community Learn Tools Library Leisure
search
English
Home > Web Front-end > JS Tutorial > JS implements shopping cart special effects

JS implements shopping cart special effects

高洛峰
Release： 2017-02-04 13:27:17
Original
1113 people have browsed it

Effect:

1. Click the Select All button to select all, click again to deselect all

2. Click the quantity ‘ + ‘ ‘ - ‘ to automatically calculate. And the totals are kept updated. ‘-’ appears when the quantity is greater than 1. When it is less than or equal to 1, '-' disappears

3. Click Delete to realize the deletion function.

4. Click the delete button next to Select All to delete them all.

5. After selecting the product, click on the selected product to display the selected product

6. The selected product can be deselected. 

<!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>
Copy after login

The above is the entire content of this article. I hope that the content of this article can bring some help to everyone's study or work. I also hope to support the PHP Chinese website!

For more articles related to JS implementation of shopping cart special effects, please pay attention to the PHP Chinese website!

Related labels：
js 购物车
source：php.cn
Previous article：Extjs Optimization (2) Universal Implementation of Form Submission Next article：Write a simple shopping cart function in JavaScript
Statement of this Website
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
Latest Articles by Author
Latest Issues
Why does the number of cookies in the "Cookie" request header exceed the number of cookies set in the "set-cookie" response header? I'm a newbie to web crawling, so my understanding of http requests is very shallow. When I...
From 2024-04-05 14:52:06
0
1
3571
jQuery.remove() and array.splice() issues So I have a page that has a list of items and a shopping list. If you add x number of item...
From 2024-04-04 17:21:35
0
1
347
Get the shopping cart item key ID of a specific removed item: WooCommerce Shopping Cart In WooCommerce I have a custom cart.php template where I need to check if a deleted produc...
From 2024-04-04 16:35:18
0
1
282
WooCommerce Checkout - Validate user roles and cart contents I'm having a challenge with WooCommerce's checkout process. I use the "B2BforWooComme...
From 2024-04-03 11:58:52
0
1
475
Avoid using coupons when choosing Local Pickup as your delivery option I use a code that adds discounts in the cart and when selecting "Local Pickup" a...
From 2024-04-02 17:42:54
0
1
355
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template