JS实现购物车特效
更新时间:2017年2月8日 10:00 点击:1979
效果:
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>
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持脚本之家!
上一篇: JavaScript字符集编码与解码详谈
下一篇: jQuery实现复选框的全选和反选
相关文章
- 本篇文章主要分享了通过window.navigator来判断浏览器及其版本信息的实例代码。具有一定的参考价值,下面跟着小编一起来看下吧...2017-01-23
- 这篇文章主要介绍了js如何实现浏览器打印功能,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下...2020-07-15
- 下面小编就为大家带来一篇利用JS实现点击按钮后图片自动切换的简单方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2016-10-25
- 作为前端,一直以来都知道HTTP劫持与XSS跨站脚本、CSRF跨站请求伪造。防御这些劫持最好的方法是从后端入手,前端能做的太少。而且由于源码的暴露,攻击者很容易绕过防御手段。但这不代表我们去了解这块的相关知识是没意义的,本文的许多方法,用在其他方面也是大有作用。...2021-05-24
- 那么今天我就用JavaScript代码来实现这个效果吧,那么首先介绍一下整个的思路,首先我们先将确定输入密码的位数,我的需求是5位,那么就用一个div标签包住5个input标签...2016-01-02
- 这篇文章主要为大家详细介绍了js+css实现回到顶部按钮back to top回到顶部按钮,感兴趣的小伙伴们可以参考一下...2016-03-03
- 这篇文章主要为大家详细介绍了js实现上传图片及时预览的相关资料,具有一定的参考价值,感兴趣的朋友可以参考一下...2016-05-09
- 这篇文章主要给大家介绍了一个关于JS正则匹配的踩坑记录,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-13
- 这篇文章主要介绍了如何使用JavaScript实现“无缝滚动 自动播放”轮播图效果,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-08-20
- 这篇文章主要给大家介绍了关于Nest.js参数校验和自定义返回数据格式的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-28
- 这篇文章主要介绍了node.js如何操作MySQL数据库,帮助大家更好的进行web开发,感兴趣的朋友可以了解下...2020-10-29
- 有时候我们需要屏蔽客户端的F12,以防菜鸟也可以随意修改我们的代码,也处于源码的保护等操作,这里就为大家分享一下常见的代码...2020-10-03
- 这篇文章主要介绍了基于JavaScript实现文字超出部分隐藏 的相关资料,需要的朋友可以参考下...2016-03-01
- 这篇文章主要介绍了js组件SlotMachine实现图片切换效果制作抽奖系统的相关资料,需要的朋友可以参考下...2016-04-19
- 这篇文章主要为大家详细介绍了js实现列表按字母排序,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-08-11
- 本文给大家介绍的是nodejs实现使用阿里大鱼短信API发送消息的方法和代码,有需要的小伙伴可以参考下。...2016-01-20
- 这篇文章主要介绍了js实现文本框输入文字个数限制代码,文本框输入的文字个数并不是无限制的,一般都会限定一个输入最高上限,如何限制,请看本文...2015-12-27
- 这篇文章主要介绍了js实现调用网络摄像头及常见错误处理,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-07
- 这篇文章主要介绍了JS创建Tag标签的方法,结合具体实例形式分析了javascript动态操作页面HTML元素实现tag标签功能的步骤与相关操作技巧,需要的朋友可以参考下...2017-06-15
- 这篇文章主要为大家详细介绍了JS实现随机生成验证码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-09-06