首页
所有分类
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 相关文章推荐
Js+XML 操作
Sep 20 Javascript
用方法封装javascript的new操作符(一)
Dec 25 Javascript
JS实现拖动示例代码
Nov 01 Javascript
javascript的parseFloat()方法精度问题探讨
Nov 26 Javascript
javascript拖拽上传类库DropzoneJS使用方法
Dec 05 Javascript
js格式化时间和js格式化时间戳示例
Feb 10 Javascript
javascript实现修改微信分享的标题内容等
Dec 11 Javascript
jQuery简单获取DIV和A标签元素位置的方法
Feb 07 Javascript
基于JavaScript实现本地图片预览
Feb 08 Javascript
微信小程序开发之选项卡(窗口底部TabBar)页面切换
Apr 12 Javascript
jQuery实现获取选中复选框的值实例详解
Jun 28 jQuery
Vue数字输入框组件示例代码详解
Jan 15 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
SRF-S84(1) PL660(1) S2000(3) MX500(1) 台湾(1) 松下(1) 南麂列岛(1) Panasonic(1) 根德(2) SRF-S83(1)
You might like
关于WordPress的SEO优化相关的一些PHP页面脚本技巧
2015/12/10 PHP
php 修改上传文件大小限制实例详解
2016/10/23 PHP
Zend Framework分发器用法示例
2016/12/11 PHP
PhpStorm 如何优雅的调试Hyperf的方法步骤
2019/11/24 PHP
浅析JavaScript原型继承的陷阱
2013/12/03 Javascript
JS将数字转换成三位逗号分隔的样式(示例代码)
2014/02/19 Javascript
nodejs中实现阻塞实例
2015/03/24 NodeJs
jquery实现根据浏览器窗口大小自动缩放图片的方法
2015/07/17 Javascript
Grunt入门教程(自动任务运行器)
2015/08/06 Javascript
jQuery实现图片局部放大镜效果
2016/03/17 Javascript
jquery siblings获取同辈元素用法实例分析
2016/07/25 Javascript
学习vue.js中class与style绑定
2016/12/03 Javascript
JavaScript正则替换HTML标签功能示例
2017/03/02 Javascript
bootstrap table动态加载数据示例代码
2017/03/25 Javascript
node.js中grunt和gulp的区别详解
2017/07/17 Javascript
JavaScript中Hoisting详解 (变量提升与函数声明提升)
2017/08/18 Javascript
微信小程序使用swiper组件实现类3D轮播图
2018/08/29 Javascript
vue中过滤器filter的讲解
2019/01/21 Javascript
ES6知识点整理之对象解构赋值应用示例
2019/04/17 Javascript
微信小程序获取当前位置和城市名
2019/11/13 Javascript
JavaScript实现轮播图片完整代码
2020/03/07 Javascript
js仿淘宝放大镜效果
2020/12/28 Javascript
python网络编程示例(客户端与服务端)
2014/04/24 Python
Python排序搜索基本算法之插入排序实例分析
2017/12/11 Python
使用Python进行QQ批量登录的实例代码
2018/06/11 Python
python的scikit-learn将特征转成one-hot特征的方法
2018/07/10 Python
Python Django 实现简单注册功能过程详解
2019/07/29 Python
Python 格式化打印json数据方法(展开状态)
2020/02/27 Python
浅谈pc和移动端的响应式的使用
2019/01/03 HTML / CSS
给水工程专业毕业生自荐信
2014/01/28 职场文书
应届电子商务毕业自荐书范文
2014/02/11 职场文书
应届大专生自荐书
2014/06/16 职场文书
考察邀请函范文
2015/01/31 职场文书
2016教师廉洁从教心得体会
2016/01/13 职场文书
导游词之泉州崇武古城
2019/12/20 职场文书
Spring IOC容器Bean的作用域及生命周期实例
2022/05/30 Java/Android