用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 相关文章推荐
javascript据option的value值快速设定初始的selected选项
Aug 13 Javascript
jquery之Document元素选择器篇
Aug 14 Javascript
jquery load()在firefox(火狐)下显示不正常的解决方法
Apr 05 Javascript
初学Jquery插件制作 在SageCRM的查询屏幕隐藏部分行的功能
Dec 26 Javascript
js 判断上传文件大小及格式代码
Nov 13 Javascript
深入理解javascript中return的作用
Dec 30 Javascript
jquery跨域请求示例分享(jquery发送ajax请求)
Mar 25 Javascript
分享十五款 jQuery 社交网络分享插件
May 16 Javascript
js实现带圆角的两级导航菜单效果代码
Aug 24 Javascript
Bootstrap学习笔记之环境配置(1)
Dec 07 Javascript
Angular2.0/4.0 使用Echarts图表的示例代码
Dec 07 Javascript
Postman模拟发送带token的请求方法
Mar 31 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操作sqlserver关于时间日期读取的小小见解
2009/11/29 PHP
破解图片防盗链的代码(asp/php)测试通过
2010/07/02 PHP
基于Zookeeper的使用详解
2013/05/02 PHP
PHP 7.4 新语法之箭头函数实例详解
2019/05/09 PHP
laravel 根据不同组织加载不同视图的实现
2019/10/14 PHP
javascript对下拉列表框(select)的操作实例讲解
2013/11/29 Javascript
jQuery制作拼图小游戏
2015/01/12 Javascript
js兼容火狐获取图片宽和高的方法
2015/05/21 Javascript
jquery实现表格隔行换色效果
2015/11/19 Javascript
jquery实现图片放大镜功能
2015/11/23 Javascript
JS实现数组去重,显示重复元素及个数的方法示例
2019/01/21 Javascript
15 分钟掌握vue-next响应式原理
2019/10/13 Javascript
浅谈Webpack4 Tree Shaking 终极优化指南
2019/11/18 Javascript
javscript 数组扁平化的实现
2020/02/03 Javascript
vue data有值,但是页面{{}} 取不到值的解决
2020/11/09 Javascript
Python实现类继承实例
2014/07/04 Python
Python数组条件过滤filter函数使用示例
2014/07/22 Python
python对数组进行反转的方法
2015/05/20 Python
Python中顺序表的实现简单代码分享
2018/01/09 Python
python3.6 实现AES加密的示例(pyCryptodome)
2018/01/10 Python
python 删除指定时间间隔之前的文件实例
2018/04/24 Python
Python实现的json文件读取及中文乱码显示问题解决方法
2018/08/06 Python
python利用小波分析进行特征提取的实例
2019/01/09 Python
HTML5之SVG 2D入门1—SVG(可缩放矢量图形)概述
2013/01/30 HTML / CSS
雅诗兰黛加拿大官网:Estee Lauder加拿大
2019/07/31 全球购物
介绍一下Mysql的存储引擎
2015/02/12 面试题
企业项目策划书
2014/01/11 职场文书
爱晚亭导游词
2015/02/09 职场文书
开除员工通知
2015/04/22 职场文书
圣诞晚会主持词开场白
2015/05/28 职场文书
2015年暑假生活总结
2015/07/13 职场文书
实习报告范文之电话客服岗位
2019/07/26 职场文书
CSS3常见动画的实现方式
2021/04/14 HTML / CSS
Windows下redis下载、redis安装及使用教程
2021/06/02 Redis
学会Python数据可视化必须尝试这7个库
2021/06/16 Python
解决MySQL报“too many connections“错误
2022/04/19 MySQL