欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JS实现购物车特效

程序员文章站 2023-02-23 12:13:32
效果: 1.点击全选按钮可以全选,再点击就全不选 2.点击数量 ‘ + ' ‘ -  ' 可以自动计算。并且合计保持更新。当数量大于1时‘ - '出现。小于等...

效果:

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>

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