JS实现购物车特效

2019-11-19 17:46:03

字体：大中小

来源：转载

供稿：网友

效果：

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('*');   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>

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

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

下一篇：jQuery实现复选框的全选和反选