用JavaScript做简易的购物车的代码示例


Posted in Javascript onOctober 20, 2017

下面是我做的一个超简单的购物车,全部都是用原生js做的

css

<style>
  table{
   text-align: center;

  }
  table img{
   width: 50px;
  }
 a {
  text-decoration: none;
  color: red;
}
 </style>

body

<table border="1" cellspacing="0">
  <thead>
  <tr>
   <th>全选 <input type="checkbox" id="ckAll"/></th>
   <th>商品</th>
   <th>单价</th>
   <th>数量</th>
   <th>操作</th>
  </tr>
  </thead>
  <tbody>
   <tr>
    <td><input type="checkbox" name="ck"/></td>
    <td>![](../img2/1.png)</td>
    <td>3</td>
    <td><input type="number" max="10" min="0" step="1" value="2"/></td>
    <td><a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="del">删除</a></td>
   </tr>
   <tr><td><input type="checkbox" name="ck"/></td>
    <td>![](../img2/2.png)</td>
    <td>3</td>
    <td><input type="number" max="10" min="0" step="1" value="3"/></td>
    <td><a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="del">删除</a></td>


   </tr>
   <tr><td><input type="checkbox" name="ck"/></td>
    <td>![](../img2/3.png)</td>
    <td>3</td>
    <td><input type="number" max="10" min="0" step="1" value="1"/></td>
    <td><a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="del">删除</a></td>


   </tr></tbody>
  <tfoot>
  <tr>
   <td colspan="3" align="right">总价:</td>
   <td colspan="2"></td>
  </tr>
  </tfoot>

 </table>
 <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="dels">删除选中项</a>

js

<script>
  window.onload=function(){
   document.getElementById("ckAll").onclick=function(){//当点击全选的复合框时触发事件
    var cks = document.getElementsByName("ck");//获取ck对象
    for(var i=0;i<cks.length;i++){ //循环得到单个tr
     cks[i].checked=this.checked; //得到的每个tr的点击都等于ckAll的点击
    }
   }
   var cks = document.getElementsByName("ck");//创建ck对象
   for(var i=0;i<cks.length;i++){ //循环得到单个tr
    cks[i].onclick=function(){ // 当点击每个当tr的时候都会触发点击事件
      for(var i=0;i<cks.length;i++){// 循环得到单个td
       if(!cks[i].checked){ //如果单个特点的点击等于false 就返回
        document.getElementById("ckAll").checked = false;//那么ckAll就等于false
        return;
       }
      }
     document.getElementById("ckAll").checked = true;//否则就等于true 说明为全选状态
    }
   }
   getSum();
    function getSum(){ //计算的方法
     var tbody = document.getElementsByTagName("tbody")[0];//创建tbody对象
     var sum =0;//先定义sum为0
      for(var i =0;i<tbody.children.length;i++){ //循环得到tr
       var tr = tbody.children[i]; //tbody中的子节点就是tr
       var td = tr.children; //tr的子节点是 td
       var price = parseFloat(td[2].innerText);//td的第二列是价格 得到价格
       var count = parseFloat(td[3].children[0].value); //第三列是数量
       sum+=price*count; //总和就等于价格*数量
       td[3].children[0].onblur=function(){ //当失去焦点的时候触发事件
        getSum();
       }
      }
     var tfoot = document.getElementsByTagName("tfoot")[0]; //创景tfoot对象
     tfoot.children[0].children[1].innerHTML =sum; //tfootd子节点 等于总和
    }

   var dels = document.getElementsByClassName("del");//创建del对象
   for(var i = 0;i<dels.length;i++){//循环得到
    dels[i].onclick=function(){
     this.parentNode.parentNode.remove();
     getSum();
    }
   }
   document.getElementsByClassName("dels")[0].onclick=function(){
     var cks = document.getElementsByName("ck");
    for(var i = cks.length-1;i>=0;i--){
      if(cks[i].checked){
       cks[i].parentNode.parentNode.remove();
      }
    }
    getSum();

   }

  }
</script>

效果图

用JavaScript做简易的购物车的代码示例

这个购物车是在学习js时做的,比较简单,但基本功能还是有的:

  1. 可以全选,单个选择.
  2. 可以单个的删除,删除选中项.
  3. 总计可以根据数量的变化而变化.

大家用在线的编辑器查看一下效果会更好.

如果有问题的话,可以随时交流... (过两天会用jQury在做一个购物车的例子)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 未结束的字符串常量错误解决方法
Jun 13 Javascript
Grid得到选择行数据的方法总结
Jan 17 Javascript
JQuery中判断一个元素下面是否有内容或者有某个标签的判断代码
Feb 02 Javascript
详解JavaScript函数绑定
Aug 18 Javascript
禁止拷贝网页内容的js代码
Jan 22 Javascript
JavaScript数组去重的两种方法推荐
Apr 05 Javascript
如何使用Bootstrap创建表单
Mar 29 Javascript
vue-cli V3.0版本的使用详解
Oct 24 Javascript
JS 音频可视化插件Wavesurfer.js的使用教程
Oct 31 Javascript
微信小程序云开发实现数据添加、查询和分页
May 17 Javascript
关于vue组件事件属性穿透详解
Oct 28 Javascript
Vue指令实现OutClick的示例
Nov 16 Javascript
浅谈JS 数字和字符串之间相互转化的纠纷
Oct 20 #Javascript
phantomjs导出html到pdf的方法总结
Oct 19 #Javascript
vue2.0设置proxyTable使用axios进行跨域请求的方法
Oct 19 #Javascript
vue resource post请求时遇到的坑
Oct 19 #Javascript
vue Element-ui input 远程搜索与修改建议显示模版的示例代码
Oct 19 #Javascript
JavaScript适配器模式详解
Oct 19 #Javascript
JavaScript门面模式详解
Oct 19 #Javascript
You might like
PHP禁止页面缓存的代码
2011/10/23 PHP
php删除二维数组中的重复值方法
2018/03/12 PHP
PDO::lastInsertId讲解
2019/01/29 PHP
基于jQuery的图片大小自动适应实现代码
2010/11/17 Javascript
js中有关IE版本检测
2012/01/04 Javascript
jquerymobile checkbox及时刷新才能获取其准确值
2012/04/14 Javascript
js replace 与replaceall实例用法详解
2013/08/03 Javascript
浅谈Javascript中深复制
2014/12/01 Javascript
原生javascript实现简单的datagrid数据表格
2015/01/02 Javascript
JavaScript删除数组元素的方法
2015/03/20 Javascript
jQuery实现信息提示框(带有圆角框与动画)效果
2015/08/07 Javascript
基于jquery实现多级菜单效果
2017/07/25 jQuery
JavaScript闭包的简单应用
2017/09/01 Javascript
详解Vue结合后台的列表增删改案例
2018/08/21 Javascript
vue 使用自定义指令实现表单校验的方法
2018/08/28 Javascript
vue-cli基础配置及webpack配置修改的完整步骤
2019/10/20 Javascript
[02:53]DOTA2亚洲邀请赛 NewBee战队巡礼
2015/02/03 DOTA
python中zip()方法应用实例分析
2016/04/16 Python
对python .txt文件读取及数据处理方法总结
2018/04/23 Python
更新pip3与pyttsx3文字语音转换的实现方法
2019/08/08 Python
对python中的*args与**kwgs的含义与作用详解
2019/08/28 Python
django 多对多表的创建和插入代码实现
2019/09/09 Python
html5文本内容_动力节点Java学院整理
2017/07/11 HTML / CSS
施华洛世奇西班牙官网:SWAROVSKI西班牙
2019/06/06 全球购物
美国鲜花递送:UrbanStems
2021/01/04 全球购物
母亲七十大寿答谢词
2014/01/18 职场文书
初中考试作弊检讨书
2014/02/01 职场文书
大学生2014全国两会学习心得体会
2014/03/10 职场文书
小班评语大全
2014/05/04 职场文书
人力资源管理系自荐信
2014/05/31 职场文书
学生夜不归宿检讨书
2014/09/23 职场文书
党员对照检查材料思想汇报(党的群众路线)
2014/09/24 职场文书
公积金贷款承诺书
2015/04/30 职场文书
雷锋的观后感
2015/06/10 职场文书
小学数学教学反思范文
2016/02/16 职场文书
nginx负载功能+nfs服务器功能解析
2022/02/28 Servers