用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 相关文章推荐
20个非常棒的Jquery实用工具 国外文章
Jan 01 Javascript
IE事件对象(The Internet Explorer Event Object)
Jun 27 Javascript
javascript限制文本框只允许输入数字(曾经与现在的方法对比)
Jan 18 Javascript
ECMAScript6的新特性箭头函数(Arrow Function)详细介绍
Jun 07 Javascript
关于javascript原型的修改与重写(覆盖)差别详解
Aug 31 Javascript
浅谈react+es6+webpack的基础配置
Aug 09 Javascript
jquery+css实现下拉列表功能
Sep 03 jQuery
node.js利用mongoose获取mongodb数据的格式化问题详解
Oct 06 Javascript
详解Vue路由钩子及应用场景(小结)
Nov 07 Javascript
解析Json字符串的三种方法日常常用
May 02 Javascript
Vue.js更改调试地址端口号的实例
Sep 19 Javascript
vuejs router history 配置到iis的方法
Sep 20 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中的字符串函数
2006/11/24 PHP
PHP图片库imagemagick安装方法
2014/09/23 PHP
php制作动态随机验证码
2015/02/12 PHP
PHP实现的通过参数生成MYSQL语句类完整实例
2016/04/11 PHP
PHP树形结构tree类用法示例
2019/02/01 PHP
一段利用WSH获取登录时间的jscript代码
2008/05/11 Javascript
优化 JavaScript 代码的方法小结
2009/07/16 Javascript
jquery的Tooltip插件 qtip使用详细说明
2010/09/08 Javascript
JQueryEasyUI datagrid框架的进阶使用
2013/04/08 Javascript
jquery 选取方法都有哪些
2014/05/18 Javascript
Javascript快速排序算法详解
2014/12/03 Javascript
js与jquery正则验证电子邮箱、手机号、邮政编码的方法
2016/07/04 Javascript
JavaScript调试的多个必备小Tips
2017/01/15 Javascript
jQuery插件FusionWidgets实现的Cylinder图效果示例【附demo源码】
2017/03/23 jQuery
删除table表格行的实例讲解
2017/09/21 Javascript
vue 监听屏幕高度的实例
2018/09/05 Javascript
使用flow来规范javascript的变量类型
2019/09/12 Javascript
javaScript 实现重复输出给定的字符串的常用方法小结
2020/02/20 Javascript
vue实现购物车功能(商品分类)
2020/04/20 Javascript
uni-app从安装到卸载的入门教程
2020/05/15 Javascript
Python动态加载模块的3种方法
2014/11/22 Python
python基于pyDes库实现des加密的方法
2017/04/29 Python
Python单元测试简单示例
2018/07/03 Python
Python3单行定义多个变量或赋值方法
2018/07/12 Python
解决python使用list()时总是报错的问题
2020/05/05 Python
Django权限设置及验证方式
2020/05/13 Python
Original Penguin英国官方网站:美国著名休闲时装品牌
2016/10/30 全球购物
美国网上花店:JustFlowers
2017/02/12 全球购物
BudgetAir印度:预订航班、酒店和汽车租赁
2019/07/07 全球购物
毕业生如何写自我鉴定
2014/03/15 职场文书
高校教师岗位职责
2014/03/18 职场文书
代理协议书
2014/04/22 职场文书
2014年教师节寄语
2014/08/11 职场文书
教育系统干部作风整顿心得体会
2014/09/09 职场文书
家长评语怎么写
2014/12/30 职场文书
Redis配置外网可访问(redis远程连接不上)的方法
2022/12/24 Redis