原生js实现购物车
更新时间:2020年9月24日 00:18 点击:2445
原生就js实现购物车增删改查,供大家参考,具体内容如下
效果图:
代码:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin:0;padding:0; } .fl{ float: left; } .fr{ float: right; } .clearfix{ clear: both; zoom: 1; } .shopping{ width: 1200px; margin: 0 auto; font-size: 14px; } .shopping .header{ width: 100%; height: 50px; line-height: 50px; background: #ccc; color: #000000; font-weight: bold; text-align: left; } .shopping .header ul{ padding-left: 30px; } .shopping .header ul li{ width: 190px; list-style: none; } .shopping .footer{ width: 100%; height: 50px; background: #ccc; color: #000000; text-align: left; } .shopping .footer .footlf{ width: 200px; line-height: 50px; margin-left: 30px; } .shopping .footer .footrg{ width: 600px; text-align:right; } .shopping .footer .footrg span:nth-child(1){ display: inline-block; padding: 0px 25px; background: black; color: white; line-height: 48px; margin-right: 20px; } .shopping .footer .footrg span:nth-child(2),.shopping .footer .footrg span:nth-child(3){ display: inline-block; margin-right: 20px; } .shopping .footer .footrg span:nth-child(4){ font-size:16px; font-weight: bold; line-height: 50px; margin-right: 50px; } .shopping .footer .footrg s{ color: red; } .content{ margin: 10px 0px; } .content dl{ margin-bottom: 20px; } .content dl dt{ border: 1px solid #CCCCCC; height: 30px; line-height: 30px; font-weight: bold; } .content dl dt{ padding-left: 20px; } .content dl dd{ padding-left: 20px; border: 1px solid #CCCCCC; height: 100px; line-height: 100px; border-top: none; } .content dl dd ul li{ list-style: none; } .content dl dd ul li img{ width: 80px; height: 80px; vertical-align: middle; } .content dl dd ul li{ width: 190px; } .content dl dd ul li s{ color: red; font-weight: bold; } .content dl dd ul li input{ width: 30px; } s{ text-decoration: none; } .content .del{ cursor: pointer; } .minus{ padding: 0px 10px; background: red; cursor: pointer; } .plus{ padding: 0px 10px; background: red; cursor: pointer; } input{ cursor: pointer; } </style> </head> <body> <div class="shopping"> <div class="header clearfix"> <ul> <li class="fl"><input type="checkbox" name="" class="all">全选</li> <li class="fl">商品</li> <li class="fl">单价</li> <li class="fl">数量</li> <li class="fl">价格</li> <li class="fl">操作</li> </ul> </div> <div class="content"> <dl> <dt>店铺:xxx快餐店1</dt> <dd> <ul> <li class="fl"><input type="checkbox" name="" class="ischeck"></li> <li class="fl"> <img src="imges/01.jpg" /> <span>凉茶</span> </li> <li class="fl"> <s>$<span class="price">100</span></s> </li> <li class="fl"> <span class="minus">-</span> <input type="text" name="" class="count" value="1"> <span class="plus">+</span> </li> <li class="fl"> <s>$<span class="price_sum">100</span></s> </li> <li class="fl"> <span class="del">删除</span> </li> </ul> </dd> </dl> <dl> <dt>店铺:xxx快餐店2</dt> <dd> <ul> <li class="fl"><input type="checkbox" name="" class="ischeck"></li> <li class="fl"> <img src="imges/02.jpg" /> <span>凉茶2</span> </li> <li class="fl"> <s>$<span class="price">200</span></s> </li> <li class="fl"> <span class="minus">-</span> <input type="text" name="" class="count" value="1"> <span class="plus">+</span> </li> <li class="fl"> <s>$<span class="price_sum">200</span></s> </li> <li class="fl"> <span class="del">删除</span> </li> </ul> </dd> </dl> <dl> <dt>店铺:xxx快餐店3</dt> <dd> <ul> <li class="fl"><input type="checkbox" name="" class="ischeck"></li> <li class="fl"> <img src="imges/02.jpg" /> <span>凉茶3</span> </li> <li class="fl"> <s>$<span class="price">300</span></s> </li> <li class="fl"> <span class="minus">-</span> <input type="text" name="" class="count" value="1" > <span class="plus">+</span> </li> <li class="fl"> <s>$<span class="price_sum">300</span></s> </li> <li class="fl"> <span class="del">删除</span> </li> </ul> </dd> </dl> </div> <div class="footer clearfix"> <div class="footlf fl"> <input type="checkbox" name="" class="all_is">反选 <input type="checkbox" name="" id="cancel">取消 </div> <div class="footrg fr"> <span>继续购物</span> <span>已选商品<s id="piece">0</s>件</span> <span>合计(不含运费):¥<s class="sum_">0.00</s></span> <span>结算</span> </div> </div> </div> </body> <script type="text/javascript"> //购物车功能要求 //1.勾选全选框 商品勾选状态为已勾选状态 并且计算商品合计 单价合计 //2.取消勾选时取消所以商品勾选 var del=document.getElementsByClassName("del");//删除 var dl=document.getElementsByTagName("dl"); var all=document.getElementsByClassName("all")[0];//获取全选按钮 var all_is=document.getElementsByClassName("all_is")[0];//获取取反按钮 var ischeck=document.getElementsByClassName("ischeck");//获取商品勾选状态复选框节点 var minus=document.getElementsByClassName("minus");//商品减 var plus=document.getElementsByClassName("plus");//商品加 var count=document.getElementsByClassName("count");//商品数量 var price=document.getElementsByClassName("price");//获得单价 var price_sum=document.getElementsByClassName("price_sum");//获得商品价格 var sum_=document.getElementsByClassName("sum_")[0];//获得商品总价格 var piece=document.getElementById("piece");//已选商品件数 var cancel=document.getElementById("cancel");//取消选择 //全选功能 all_(); function all_(){ all.onchange=function(){ //当全选框状态为ture 的时候循环勾选 商品状态 为false 则相反 if(all.checked){ for(var i=0;i<ischeck.length;i++) { ischeck[i].checked=true; } piece_();//已选商品件数 } else{ for(var i=0;i<ischeck.length;i++) { ischeck[i].checked=false; } piece_();//已选商品件数 } shss();//每次商品勾选或者数量发生改变计算总额数 } } //商品状态勾选 comm_ischeck(); function comm_ischeck(){ for (var i=0;i<ischeck.length;i++) { (function(j){ ischeck[j].onclick=function(){ shss();//每次商品勾选或者数量发生改变计算总额数 piece_();//每次商品勾选状态发生变化计算已选商品件数 for (var k=0;j<ischeck.length;k++) {//循环判断商品勾选状态 if (!ischeck[k].checked) {//如果有一个为flase 则全选框取消勾选 all.checked = false; break; //结束循环 } //否则勾选 all.checked =true; } } })(i) } } //反选 all_iss(); function all_iss(){ all_is.onchange=function(){ //循环遍历勾选状态 商品状态勾选则取消勾选 for(var i=0;i<ischeck.length;i++){ ischeck[i].checked = ischeck[i].checked?false:true; } shss();//每次商品勾选或者数量发生改变计算总额数 piece_();//每次商品勾选状态发生变化计算已选商品件数 } } //减少商品 add_is(); function add_is(){ for(var i=0;i<minus.length;i++){ (function(i){ minus[i].onclick=function(){ if(parseInt(count[i].value)<2){ count[i].value=1; } else{ count[i].value=parseInt(count[i].value)-1; } // parseInt(count[i].value) 因为得到的value 是string 类型 运算需要进行类型转换 //如果数量值<1默认为0 //count[i].value=parseInt(count[i].value)<1?0:(parseInt(count[i].value)-1); var pric=price[i].innerHTML;//商品单价 price_sum[i].innerHTML=parseInt(pric)*parseInt(count[i].value);//商品总结价格等于=商品单价*商品数量 shss();//每次商品勾选或者数量发生改变计算总额数 piece_();//每次商品勾选状态发生变化计算已选商品件数 } })(i) } } //添加商品 add(); function add(){ for(var i=0;i<plus.length;i++){ //立即执行函数得到下标 (function(i){ plus[i].onclick=function(){ var pric=price[i].innerHTML;//商品单价 //因为得到的value 是string 类型 运算需要进行类型转换 count[i].value=parseInt(count[i].value)+1;//改变数量值 price_sum[i].innerHTML=parseInt(pric)*parseInt(count[i].value);//商品总结价格等于=商品单价*商品数量 shss();//每次商品勾选或者数量发生改变计算总额数 piece_();//每次商品勾选状态发生变化计算已选商品件数 } })(i) } } //count count_(); function count_(){ for(var i=0;i<count.length;i++){ (function(i){ count[i].onchange=function(){ var pric=price[i].innerHTML;//商品单价 //因为得到的value 是string 类型 运算需要进行类型转换 count[i].value=parseInt(count[i].value)+1;//改变数量值 price_sum[i].innerHTML=parseInt(pric)*parseInt(count[i].value);//商品总结价格等于=商品单价*商品数量 shss();//每次商品勾选或者数量发生改变计算总额数 piece_();//每次商品勾选状态发生变化计算已选商品件数 } })(i) } } //计算已选商品件数 piece_(); function piece_(){ piece.innerHTML=0; for(var i=0;i<ischeck.length;i++){ if(ischeck[i].checked){ piece.innerHTML=parseInt(piece.innerHTML)+parseInt(count[i].value); } } } //计算商品总额 shss(); function shss(){ sum_.innerHTML=0; for(var i=0;i<ischeck.length;i++){ if(ischeck[i].checked){ console.log(sum_.innerHTM); sum_.innerHTML=parseInt(sum_.innerHTML)+parseInt(price_sum[i].innerHTML); } } } //取消选择 cancel_(); function cancel_(){ //取消按钮点击事件 cancel.onclick=function(){ for(var i=0;i<ischeck.length;i++){ ischeck[i].checked=false; } shss(); piece_(); } } //删除 del_(); function del_(){ for(var i=0;i<del.length;i++){ (function(i){ del[i].onclick=function(){ dl[i].parentNode.removeChild(dl[i]); shss();//每次商品勾选或者数量发生改变计算总额数 piece_();//每次商品勾选状态发生变化计算已选商品件数 } })(i) } } </script> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持猪先飞。
上一篇: 原生js实现分页效果
下一篇: 小程序点餐界面添加购物车左右摆动动画
相关文章
- 这篇文章主要为大家详细介绍了ASP.NET购物车的实现过程,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-09-22
- 本篇文章主要分享了通过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