首页
所有分类
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 相关文章推荐
javascript的console.log()用法小结
May 31 Javascript
JavaScript结合Bootstrap仿微信后台多图文界面管理
Jul 22 Javascript
详解Angular中$cacheFactory缓存的使用
Aug 19 Javascript
微信小程序 wx:key详细介绍
Oct 28 Javascript
jQuery中Nicescroll滚动条插件的用法
Nov 10 Javascript
jQuery 如何实现一个滑动按钮开关
Dec 01 Javascript
快速入门Vue
Dec 19 Javascript
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
Oct 19 jQuery
vue2实现可复用的轮播图carousel组件详解
Nov 27 Javascript
深入理解ES6之数据解构的用法
Jan 13 Javascript
微信小程序自定义底部弹出框
Nov 16 Javascript
jquery中attr、prop、data区别与用法分析
Sep 25 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
SRF-S84(1) MX500(1) 南麂列岛(1) 森海(1) 台湾(1) PL660(1) YB400(2) 直流胆(1) S2000(3) SRF-S83(1)
You might like
PHP中ltrim与rtrim去除左右空格及特殊字符实例
2016/01/07 PHP
js parsefloat parseint 转换函数
2010/01/21 Javascript
jQuery EasyUI API 中文文档 可调整尺寸
2011/09/29 Javascript
jquery实现文本框数量加减功能的例子分享
2014/05/10 Javascript
nodejs中实现阻塞实例
2015/03/24 NodeJs
js正则表达式匹配数字字母下划线等
2015/04/14 Javascript
nodejs实现HTTPS发起POST请求
2015/04/23 NodeJs
基于JavaScript怎么实现让歌词滚动播放
2015/11/03 Javascript
js判断主流浏览器类型和版本号的简单实现代码
2016/05/26 Javascript
浅谈Vue.js中的v-on(事件处理)
2017/09/05 Javascript
自定义Vue组件打包、发布到npm及使用教程
2019/05/22 Javascript
原生JS实现无缝轮播图片
2020/06/24 Javascript
[54:30]Liquid vs Newbee 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
python实现linux服务器批量修改密码并生成execl
2014/04/22 Python
python实现搜索本地文件信息写入文件的方法
2016/02/22 Python
举例讲解Python面向对象编程中类的继承
2016/06/17 Python
利用Python破解斗地主残局详解
2017/06/30 Python
python可视化爬虫界面之天气查询
2019/07/03 Python
python pygame实现球球大作战
2019/11/25 Python
Python嵌入C/C++进行开发详解
2020/06/09 Python
解决PyCharm IDE环境下,执行unittest不生成测试报告的问题
2020/09/03 Python
Trip.com香港网站：Ctrip携程旗下，全球最大的网上旅游社之一
2016/08/01 全球购物
美国市场上最实惠的送餐服务：Dinnerly
2018/03/18 全球购物
好莱坞百老汇御用王牌美妆：Koh Gen Do 江原道
2018/04/03 全球购物
Skechers越南官方网站：来自美国的运动休闲品牌
2021/02/22 全球购物
汽车维修与检测专业应届生求职信
2013/11/12 职场文书
个人应聘自我评价分享
2013/11/18 职场文书
区优秀教师事迹材料
2014/02/10 职场文书
产品质量承诺书
2014/03/27 职场文书
《大海那边》教学反思
2014/04/09 职场文书
广告宣传策划方案
2014/05/21 职场文书
简单通用的简历自我评价
2014/09/21 职场文书
2015秋学期开学寄语
2015/05/28 职场文书
导游词之崇武古城
2019/10/07 职场文书
导游词之山东八大关
2019/12/18 职场文书
MySql统计函数COUNT的具体使用详解
2022/08/14 MySQL