首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

JS实现购物车特效

Posted in Javascript onFebruary 02, 2017

效果：

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>

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

JS实现购物车特效

- Author -

happyzgm

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
jQuery UI的Dialog无法提交问题的解决方法
Jan 11 Javascript
js交换排序 冒泡排序算法（Javascript版）
Oct 04 Javascript
jQuery实现复选框批量选择与反选的方法
Jun 17 Javascript
jQuery实现点击后标记当前菜单位置(背景高亮菜单)效果
Aug 22 Javascript
javascript实现的全国省市县无刷新多级关联菜单效果代码
Aug 01 Javascript
JS关闭窗口时产生的事件及用法示例
Aug 20 Javascript
JavaScript简单实现合并两个Json对象的方法示例
Oct 16 Javascript
js删除数组中的元素delete和splice的区别详解
Feb 03 Javascript
Vue使用枚举类型实现HTML下拉框步骤详解
Feb 05 Javascript
AngularJS中重新加载当前路由页面的方法
Mar 09 Javascript
js中el表达式的使用和非空判断方法
Mar 28 Javascript
js实现弹框效果
Mar 24 Javascript
jQuery实现复选框的全选和反选
Feb 02 #Javascript
jQuery制作图片旋转效果
Feb 02 #Javascript
浅谈javascript中的 “ &amp;&amp; ” 和 “ || ”
Feb 02 #Javascript
Javascript中的 “&amp;” 和 “|” 详解
Feb 02 #Javascript
javascript实现简易计算器
Feb 01 #Javascript
javascript实现右下角广告框效果
Feb 01 #Javascript
基于javascript实现最简单选项卡切换
Feb 01 #Javascript
SQL注入(2) canvas(2) flex(1) 匹配文本(1) 追加文本(1) 选择器(1) GNN(1) flex-shrink(1) 图片模糊(1) 代理(2)
You might like
php中sql注入漏洞示例 sql注入漏洞修复
2014/01/24 PHP
php截取字符串函数substr,iconv_substr,mb_substr示例以及优劣分析
2014/06/10 PHP
php打造智能化的柱状图程序，用于报表等
2015/06/19 PHP
javascript object array方法使用详解
2012/12/03 Javascript
Json字符串转换为JS对象的高效方法实例
2013/05/01 Javascript
基于JavaScript 类的使用详解
2013/05/07 Javascript
js鼠标点击图片实现随机变换图片的方法
2015/02/16 Javascript
基于JS代码实现图片在页面中旋转效果
2016/06/16 Javascript
JQuery和PHP结合实现动态进度条上传显示
2016/11/23 Javascript
非常优秀的JS图片轮播插件Swiper的用法
2017/01/03 Javascript
html5+canvas实现支持触屏的签名插件教程
2017/05/08 Javascript
使用html+js+css 实现页面轮播图效果(实例讲解)
2017/09/21 Javascript
Vue-路由导航菜单栏的高亮设置方法
2018/03/17 Javascript
详解在React里使用&quot;Vuex&quot;
2018/04/02 Javascript
JS实现二维数组横纵列转置的方法
2018/04/17 Javascript
对vue2.0中.vue文件页面跳转之.$router.push的用法详解
2018/08/24 Javascript
详解vue的双向绑定原理及实现
2019/05/05 Javascript
小程序实现搜索框
2020/06/19 Javascript
JS获取一个字符串中指定字符串第n次出现的位置
2021/02/10 Javascript
[01:38]DOTA2第二届亚洲邀请赛中国区预选赛出线战队晋级之路
2017/01/17 DOTA
Python基础中所出现的异常报错总结
2016/11/19 Python
python 计算文件的md5值实例
2017/01/13 Python
利用python将json数据转换为csv格式的方法
2018/03/22 Python
Python unittest单元测试框架总结
2018/09/08 Python
python命令行工具Click快速掌握
2019/07/04 Python
python按比例随机切分数据的实现
2019/07/11 Python
英国广泛的照明产品网站：Lights4living
2018/01/28 全球购物
彪马俄罗斯官网：PUMA俄罗斯
2019/07/13 全球购物
维多利亚的秘密阿联酋官网：Victoria’s Secret阿联酋
2019/12/07 全球购物
见习期自我鉴定
2013/11/07 职场文书
本科生导师推荐信范文
2014/05/18 职场文书
广告设计专业毕业生自我鉴定
2014/09/27 职场文书
村当支部个人对照检查材料思想汇报
2014/10/06 职场文书
淮海战役观后感
2015/06/11 职场文书
Promise面试题详解之控制并发
2021/05/14 面试题
Qt数据库应用之实现图片转pdf
2022/06/01 Java/Android