suchen

Heim  >  Artikel  >  Web-Frontend  >  JS implementiert Warenkorb-Spezialeffekte

JS implementiert Warenkorb-Spezialeffekte

高洛峰
高洛峰Original
2017-02-04 13:27:171071Durchsuche

Effekt:

1. Klicken Sie auf die Schaltfläche „Alle auswählen“, um alle auszuwählen, und klicken Sie erneut, um die Auswahl aller aufzuheben.

2. Klicken Sie auf die Menge „+“ – „, um die Menge automatisch zu berechnen. Und die Summen werden auf dem neuesten Stand gehalten. „-“ erscheint, wenn die Menge größer als 1 ist. Wenn es kleiner oder gleich 1 ist, verschwindet „-“

3 Klicken Sie auf „Löschen“, um die Löschfunktion zu aktivieren.

4. Klicken Sie auf die Schaltfläche „Löschen“ neben „Alle auswählen“, um alle zu löschen.

5. Klicken Sie nach der Auswahl des Produkts auf das ausgewählte Produkt, um das ausgewählte Produkt anzuzeigen

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>

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass der Inhalt dieses Artikels jedem beim Lernen oder Arbeiten helfen kann. Ich hoffe auch, die PHP-Chinese-Website zu unterstützen.

Weitere Artikel zur JS-Implementierung von Warenkorb-Spezialeffekten finden Sie auf der chinesischen PHP-Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Extjs-Optimierung (2) Universelle Implementierung der FormularübermittlungNächster Artikel：Extjs-Optimierung (2) Universelle Implementierung der Formularübermittlung

In Verbindung stehende Artikel

Mehr sehen