搜索

首页  >  文章  >  web前端  >  JS实现购物车特效

JS实现购物车特效

高洛峰
高洛峰原创
2017-02-04 13:27:171090浏览

效果：

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中文网！

声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
上一篇：Extjs优化(二)Form表单提交通用实现下一篇：JavaScript编写一个简易购物车功能

相关文章

查看更多