JS实现购物车特效

2024-05-06 16:34:55

字体：大中小

来源：转载

供稿：网友

效果：

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"      <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"      <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"      <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"      <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('*');      for (var i = 0, len = els.length; i < len; i++) {        if (els[i].className === cls          || els[i].className.indexOf(cls + ' ') >= 0          || els[i].className.indexOf(' ' + cls + ' ') >= 0          || els[i].className.indexOf(' ' + cls) >= 0) {          ret.push(els[i]);        }      }      return ret;    }  }  var cartTable = document.getElementById('cartTable');  var tr = cartTable.children[1].rows;  var checkInputs = document.getElementsByClassName('check');  var checkAllInputs = document.getElementsByClassName('check-all');  var selectedTotal = document.getElementById('selectedTotal');  var priceTotal = document.getElementById('priceTotal');  var selected = document.getElementById('selected');  var foot = document.getElementById('foot');  var selectedViewList = document.getElementById('selectedViewList');  var deleteAll = document.getElementById('deleteAll');  //计算  function getTotal() {    var seleted = 0;    var price = 0;    var HTMLstr = '';    for (var i = 0, len = tr.length; i < len; i++) {      if (tr[i].getElementsByTagName('input')[0].checked) {        tr[i].className = 'on';        seleted += parseInt(tr[i].getElementsByTagName('input')[1].value);        price += parseFloat(tr[i].cells[4].innerHTML);        HTMLstr += '<div><img src="' + tr[i].getElementsByTagName('img')[0].src + '"><span class="del" index="' + i + '">取消选择</span></div>'      }      else {        tr[i].className = '';      }    }    selectedTotal.innerHTML = seleted;    priceTotal.innerHTML = price.toFixed(2);    selectedViewList.innerHTML = HTMLstr;    if (seleted == 0) {      foot.className = 'foot';    }  }  //小计  function getSubTotal(tr) {    var tds = tr.cells;    var price = parseFloat(tds[2].innerHTML);    var count = parseInt(tr.getElementsByTagName('input')[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 === 'check-all check') {        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 == 'foot') {      if (selectedTotal.innerHTML != 0) {        foot.className = 'foot show';      }    }    else {      foot.className = 'foot';    }  }  selectedViewList.onclick = function (e) {    e = e || window.event;    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();    }  }  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;          }          if (input.value <= 1) {            reduce.innerHTML = '';          }          getSubTotal(this);          break;        case 'delete':          var conf = confirm('确定要删除吗？');          if (conf) {            this.parentNode.removeChild(this);          }          break        default :          break;      }      getTotal();    }    tr[i].getElementsByTagName('input')[1].onkeyup = function () {      var val = parseInt(this.value);      var tr = this.parentNode.parentNode      var reduce = tr.getElementsByTagName('span')[1];      if (isNaN(val) || val < 1) {        val = 1;      }      this.value = val;      if (val <= 1) {        reduce.innerHTML = '';      }      else {        reduce.innerHTML = '-';      }      getSubTotal(tr);      getTotal();    }  }  deleteAll.onclick = function () {    if (selectedTotal.innerHTML != '0') {      var conf = confirm('确定删除吗？');      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--;          }        }      }    }  }  checkAllInputs[0].checked = true;  checkAllInputs[0].onclick();}</script></body></html>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持VeVb武林网！

注：相关教程知识阅读请移步到JavaScript/Ajax教程频道。

上一篇：浅谈javascript中的 “ ” 和 “ || ”

下一篇：JavaScript字符集编码与解码详谈