首页
所有分类
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 相关文章推荐
js png图片(有含有透明)在IE6中为什么不透明了
Feb 07 Javascript
神奇的7个jQuery 3D插件整理
Jan 06 Javascript
Jquery post传递数组方法实现思路及代码
Apr 28 Javascript
20分钟轻松创建自己的Bootstrap站点
May 12 Javascript
Javascript 两种刷新方法以及区别和适用范围
Jan 17 Javascript
JS Select下拉框(支持输入模糊查询)
Feb 04 Javascript
Bootstrap标签页（Tab）插件使用方法
Mar 21 Javascript
vue 怎么创建组件及组件使用方法
Jul 27 Javascript
angular 实时监听input框value值的变化触发函数方法
Aug 31 Javascript
Vue  webpack 项目自动打包压缩成zip文件的方法
Jul 24 Javascript
JQuery实现ul中添加LI和删除指定的Li元素功能完整示例
Oct 16 jQuery
jquery实现简易验证插件封装
Sep 13 jQuery
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
模糊匹配(1) 人工智能(2) 井字棋(1) FuzzyWuzzy(1) 计算器(5) Pyecharts(7) 五子棋(12) PyTorch(1) 图像处理(1) 模型保存加载(1)
You might like
PHP数组传递是值传递而非引用传递概念纠正
2013/01/31 PHP
php实现的九九乘法口诀表简洁版
2014/07/28 PHP
Codeigniter控制器controller继承问题实例分析
2016/01/19 PHP
CI框架常用方法小结
2016/05/17 PHP
MC Dialog js弹出层 完美兼容多浏览器(5.6更新)
2010/05/06 Javascript
判断用户的在线状态 onbeforeunload事件
2011/03/05 Javascript
javascript变量作用域使用中常见错误总结
2013/03/26 Javascript
原生Js实现元素渐隐/渐现(原理为修改元素的css透明度)
2013/06/24 Javascript
网页中可关闭的漂浮窗口实现可自行调节
2013/08/20 Javascript
对js关键字命名的疑问介绍
2014/04/25 Javascript
jQuery实现ichat在线客服插件
2014/12/29 Javascript
JavaScript实现数据类型的相互转换
2016/03/06 Javascript
javascript实现起伏的水波背景效果
2016/05/16 Javascript
浅谈JavaScript前端开发的MVC结构与MVVM结构
2016/06/03 Javascript
iframe中使用jquery进行查找的方法【案例分析】
2016/06/17 Javascript
微信小程序  checkbox组件详解及简单实例
2017/01/10 Javascript
Vue.js结合bootstrap实现分页控件
2017/03/10 Javascript
vue加载完成后的回调函数方法
2018/09/07 Javascript
浅谈Angular 观察者模式理解
2018/11/01 Javascript
微信小程序实现的图片保存功能示例
2019/04/24 Javascript
纯js实现无缝滚动功能代码实例
2020/02/21 Javascript
[02:58]献给西雅图的情书_高清
2014/05/29 DOTA
python之模拟鼠标键盘动作具体实现
2013/12/30 Python
Python+Wordpress制作小说站
2017/04/14 Python
Python实现JSON反序列化类对象的示例
2018/01/31 Python
python初步实现word2vec操作
2020/06/09 Python
Python流程控制语句的深入讲解
2020/06/15 Python
几道数据库的概念性面试题
2014/05/30 面试题
兼职业务员岗位职责
2014/01/01 职场文书
工作睡觉检讨书
2014/02/25 职场文书
最经典的商业地产项目广告词
2014/03/13 职场文书
保护水资源的标语
2014/06/17 职场文书
2014年工人工作总结
2014/11/25 职场文书
总经理司机岗位职责
2015/04/10 职场文书
员工升职自我评价
2019/03/26 职场文书
详解JAVA的控制语句
2021/11/11 Java/Android