首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

原生js实现购物车

Posted in Javascript onSeptember 23, 2020

原生就js实现购物车增删改查，供大家参考，具体内容如下

效果图：

原生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实现购物车

- Author -

zyfacd

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
理解Javascript_03_javascript全局观
Oct 11 Javascript
JQuery入门——事件切换之hover()方法应用介绍
Feb 05 Javascript
javascript中简单的进制转换代码实例
Oct 26 Javascript
js中replace的用法总结
Dec 27 Javascript
使用jQuery的toggle()方法对HTML标签进行显示、隐藏的方法(示例)
Sep 01 Javascript
浅述Javascript的外部对象
Dec 07 Javascript
微信小程序实现图片自适应(支持多图)
Jan 25 Javascript
ExtJs的Ext.Ajax.request实现waitMsg等待提示效果
Jun 14 Javascript
基于JavaScript实现微信抢红包功能
Jul 20 Javascript
Electron autoUpdater实现Windows安装包自动更新的方法
Dec 24 Javascript
JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】
Jul 11 jQuery
CocosCreator如何实现划过的位置显示纹理
Apr 14 Javascript
javascript实现简易计算器功能
Sep 23 #Javascript
javascript使用正则表达式实现注册登入校验
Sep 23 #Javascript
javascript实现点击按钮切换轮播图功能
Sep 23 #Javascript
Vue3为什么这么快
Sep 23 #Javascript
Angular短信模板校验代码
Sep 23 #Javascript
JavaScript实现单点登录的示例
Sep 23 #Javascript
Vue+Java+Base64实现条码解析的示例
Sep 23 #Javascript
捷克购物网站(26) 斯洛伐克购物网站(7) 秘鲁购物网站(1) 新西兰购物网站(42) 智利购物网站(5) 沙特阿拉伯购物网站(9) 菲律宾购物网站(13) 匈牙利购物网站(11) 北美洲购物网站(1) 卡塔尔购物网站(3)
You might like
PHP压缩html网页代码(清除空格,换行符,制表符,注释标记)
2012/04/02 PHP
Linux系统下php获得系统分区信息的方法
2015/03/30 PHP
详解PHP中的PDO类
2015/07/06 PHP
PHP实现递归无限级分类
2015/10/22 PHP
javascript 触发HTML元素绑定的函数
2010/09/11 Javascript
判断一个对象是否为jquery对象的方法
2014/03/12 Javascript
jquery默认校验规则整理
2014/03/24 Javascript
Jquery插件编写简明教程
2014/03/25 Javascript
Nodejs中自定义事件实例
2014/06/20 NodeJs
原生js和jquery实现图片轮播淡入淡出效果
2015/04/23 Javascript
javascript实现鼠标移到Image上方时显示文字效果的方法
2015/08/07 Javascript
分步解析JavaScript实现tab选项卡自动切换功能
2016/01/25 Javascript
url中的特殊符号有什么含义(推荐)
2016/06/17 Javascript
js中动态创建json,动态为json添加属性、属性值的实例
2016/12/02 Javascript
使用jQuery实现两个div中按钮互换位置的实例代码
2017/09/21 jQuery
微信小程序排坑指南详解
2018/05/23 Javascript
JavaScript实现的简单加密解密操作示例
2018/06/01 Javascript
基于Python实现的ID3决策树功能示例
2018/01/02 Python
Python带动态参数功能的sqlite工具类
2018/05/26 Python
Python判断中文字符串是否相等的实例
2018/07/06 Python
利用Pyhton中的requests包进行网页访问测试的方法
2018/12/26 Python
python获取交互式ssh shell的方法
2019/02/14 Python
python字典的遍历3种方法详解
2019/08/10 Python
Python之Django自动实现html代码(下拉框,数据选择)
2020/03/13 Python
python opencv图像处理(素描、怀旧、光照、流年、滤镜 原理及实现)
2020/12/10 Python
CSS3 transition 实现通知消息轮播条
2020/10/14 HTML / CSS
德国最大的拼图在线商店：Puzzle.de
2016/12/17 全球购物
师范应届生教师求职信
2013/11/05 职场文书
公司年会晚宴演讲稿
2014/01/06 职场文书
直接有效的自我评价
2014/01/11 职场文书
档案检查欢迎词
2014/01/13 职场文书
2015年机械设备管理工作总结
2015/05/04 职场文书
入党培养人考察意见
2015/06/08 职场文书
大学生如何逃脱“毕业季创业队即散伙”魔咒？
2019/08/19 职场文书
JavaScript 定时器详情
2021/11/11 Javascript
图片批量处理 - 尺寸、格式、水印等
2022/03/07 杂记