首页
所有分类
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 相关文章推荐
在IE上直接编辑网页内容的js代码(IE地址栏js)
Apr 27 Javascript
基于jquery的内容循环滚动小模块（仿新浪微博未登录首页滚动微博显示）
Mar 28 Javascript
AngularJs 国际化（I18n/L10n）详解
Sep 01 Javascript
Vuejs第十一篇组件之slot内容分发实例详解
Sep 09 Javascript
javascript cookie用法基础教程(概念,设置,读取及删除)
Sep 20 Javascript
jQuery插件WebUploader实现文件上传
Nov 07 Javascript
浅谈jquery页面初始化的4种方式
Nov 27 Javascript
详解能在多种前端框架下使用的表格控件
Jan 11 Javascript
Angular实现下拉框模糊查询功能示例
Jan 03 Javascript
vue动态子组件的两种实现方式
Sep 01 Javascript
vue中实现拖动调整左右两侧div的宽度的示例代码
Jul 22 Javascript
JS实现页面侧边栏效果探究
Jan 08 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
DHCP(2) Ubuntu Server(6) 线程池(1) 池化技术(1) Repository接口(3) Android(19) systemctl(1) Spring Data JPA(4) 域控制器(1) FTP(9)
You might like
PHP中上传多个文件的表单设计例子
2014/11/19 PHP
ecshop实现smtp发送邮件
2015/02/03 PHP
PHP共享内存用法实例分析
2016/02/12 PHP
PHP设置Cookie的HTTPONLY属性方法
2017/02/09 PHP
THREE.JS入门教程(3)着色器-下
2013/01/24 Javascript
JS获取当前日期和时间的简单实例
2013/11/19 Javascript
js 时间格式与时间戳的相互转换示例代码
2013/12/25 Javascript
jquery 中ajax执行的优先级
2015/06/22 Javascript
使用Object.defineProperty实现简单的js双向绑定
2016/04/15 Javascript
Bootstrap 最常用的JS插件系列总结（图片轮播、标签切换等）
2016/07/14 Javascript
jquery实现页面加载效果
2017/02/21 Javascript
微信小程序--组件（swiper）详细介绍
2017/06/13 Javascript
Webpack实战加载SVG的方法
2017/12/26 Javascript
微信小程序获取用户信息的两种方法wx.getUserInfo与open-data实例分析
2019/05/03 Javascript
使用imba.io框架得到比 vue 快50倍的性能基准
2019/06/17 Javascript
vue项目接口域名动态获取操作
2020/08/13 Javascript
nuxt引入组件和公共样式的操作
2020/11/05 Javascript
Python多线程编程（五）：死锁的形成
2015/04/05 Python
对numpy 数组和矩阵的乘法的进一步理解
2018/04/04 Python
Python实现的堆排序算法示例
2018/04/29 Python
示例详解Python3 or Python2 两者之间的差异
2018/08/23 Python
Python 识别12306图片验证码物品的实现示例
2020/01/20 Python
小白教你PyCharm从下载到安装再到科学使用PyCharm2020最新激活码
2020/09/25 Python
HTML5中5个简单实用的API（第二篇，含全屏、可见性、拍照、预加载、电池状态）
2014/05/07 HTML / CSS
基于 HTML5 WebGL 实现的医疗物流系统
2019/10/08 HTML / CSS
Html5定位终极解决方案
2020/02/05 HTML / CSS
介绍一下Ruby的特点
2013/01/20 面试题
银行毕业实习自我鉴定
2013/09/19 职场文书
高中生毕业学习总结的自我评价
2013/11/14 职场文书
质量工程师岗位职责
2013/11/16 职场文书
《中国的气候》教学反思
2014/02/23 职场文书
2014各大专业毕业生自我评价
2014/09/17 职场文书
环境卫生工作汇报材料
2014/10/28 职场文书
社区学习党的群众路线教育实践活动心得体会
2014/11/03 职场文书
HTML页面中使两个div并排显示的实现
2022/05/15 HTML / CSS
小程序实现侧滑删除功能
2022/06/25 Javascript