js 购物车的实现

购物车原理：创建一个构造函数，把涉及到的项目写成方法，然后把这些方法放到构造函数的原型对象上，通过按钮绑定，调用原型对象上的方法，实现对涉及项目的改变

html代码：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>购物车</title>

     <script src="./js/gouwu.js"></script>

     <link rel="stylesheet" href="./css/gouwu.css">

 </head>

 <body>

     <table>

         <thead>

             <tr>

                 <th class="tdone">序号</th>

                 <th class="tdtwo">商品名称</th>

                 <th class="tdthree">数量</th>

                 <th class="tdfour">单价</th>

                 <th class="tdfive">小计</th>

                 <th class="tdsix">操作</th>

             </tr>

         </thead>

         <tbody>

             <tr class="trclass">

                 <td class="tdone xuhao">1</td>

                 <td class="tdtwo ">烤煎饼</td>

                 <td class="tdthree"><span class="jiajie"><input type="button" value="-"><span class="num">0</span><input type="button" value="+"></span></td>

                 <td class="tdfour"><span>单价：</span><span class="unit">2</span></td>

                 <td class="tdfive"><span>小计：</span><span class="subtal">0</span></td>

                 <td class="tdsix"><button class="del">删除</button></td>

             </tr>

               <tr class="trclass">

                 <td class="tdone xuhao">2</td>

                 <td class="tdtwo">珍珠奶茶</td>

                 <td class="tdthree"><span class="jiajie"><input type="button" value="-"><span class="num">0</span><input type="button" value="+"></span></td>

                 <td class="tdfour"><span>单价：</span><span class="unit">3.5</span></td>

                 <td class="tdfive"><span>小计：</span><span class="subtal">0</span></td>

                 <td class="tdsix"><button class="del">删除</button></td>

             </tr>

               <tr class="trclass">

                 <td class="tdone xuhao">3</td>

                 <td class="tdtwo">羊肉串</td>

                 <td class="tdthree"><span class="jiajie"><input type="button" value="-"><span class="num">0</span><input type="button" value="+"></span></td>

                 <td class="tdfour"><span>单价：</span><span class="unit">1.5</span></td>

                 <td class="tdfive"><span>小计：</span><span class="subtal">0</span></td>

                 <td class="tdsix"><button class="del">删除</button></td>

             </tr>

               <tr>

                 <td class="tdone xuhao">4</td>

                 <td class="tdtwo">牛肉</td>

                 <td class="tdthree"><span class="jiajie"><input type="button" value="-"><span class="num">0</span><input type="button" value="+"></span></td>

                 <td class="tdfour"><span>单价：</span><span class="unit">10</span></td>

                 <td class="tdfive"><span>小计：</span><span class="subtal">0</span></td>

                 <td class="tdsix"><button class="del">删除</button></td>

             </tr>

               <tr class="trclass">

                 <td class="tdone xuhao">5</td>

                 <td class="tdtwo">烧刀子</td>

                 <td class="tdthree"><span class="jiajie"><input type="button" value="-"><span class="num">0</span><input type="button" value="+"></span></td>

                 <td class="tdfour"><span>单价：</span><span class="unit">1.8</span></td>

                 <td class="tdfive"><span>小计：</span><span class="subtal">0</span></td>

                 <td class="tdsix"><button class="del">删除</button></td>

             </tr>

              <tr class="trclass">

                 <td class="tdone xuhao">6</td>

                 <td class="tdtwo">水煮鱼</td>

                 <td class="tdthree"><span class="jiajie"><input type="button" value="-"><span class="num">0</span><input type="button" value="+"></span></td>

                 <td class="tdfour"><span>单价：</span><span class="unit">15</span></td>

                 <td class="tdfive"><span>小计：</span><span class="subtal">0</span></td>

                 <td class="tdsix"><button class="del">删除</button></td>

             </tr>

              <tr class="trclass">

                 <td class="tdone xuhao">7</td>

                 <td class="tdtwo">花生米</td>

                 <td class="tdthree"><span class="jiajie"><input type="button" value="-"><span class="num">0</span><input type="button" value="+"></span></td>

                 <td class="tdfour"><span>单价：</span><span class="unit">3</span></td>

                 <td class="tdfive"><span>小计：</span><span class="subtal">0</span></td>

                 <td class="tdsix"><button class="del">删除</button></td>

             </tr>

             <tr><td   colspan="6"; class="talast"><span>商品一共 <span class="goods_num">0</span> 件; 共计花费 <span class="pricetal">0</span> 元; 其中最贵的商品单价是 <span class="pricest">0</span> 元</span></td></tr>

         </tbody>

     </table>

 </body>

 </html>

css代码：

     table{

         width:50%;

         position:relative;

         margin:30px auto;

         border-collapse: collapse;

         border:1px solid gray;

     }

     th{

         background: cornflowerblue;

         height:2.5em;

     }

     .tdone{

         width:10%;

     }

     .tdtwo{

         width:20%;

     }

      .tdthree{

         width:20%;

     }

      .tdfour{

         width:20%;

     }

      .tdfive{

         width:20%;

     }

     .tdsix{

         width:10%;

     }

     td{

         height:2em;

         text-align: center;

         border:1px solid #ccc;

     }

     .num{

         display:inline-block;

         width:3em;

     }

     input{

         height:2em;

     }

     .talast{

         text-align: left;

     }

js代码：

 window.onload = function(){

     function cart(){

         this.abtn = document.querySelectorAll('input');

         this.ogood_num = document.querySelector('.goods_num');

         this.opricetal = document.querySelector('.pricetal');

         this.opricest = document.querySelector('.pricest');

         this.totalnum = 0;

     };

      //小计:  商品数量 * 商品单价

     cart.prototype.getsubtotal = function(goodsnum,unitprice){

         return parseInt(goodsnum) * parseFloat(unitprice) ;

     };

     // 计算商品的总计花费

     cart.prototype.gettotal = function(){

         var asubtotal = document.querySelectorAll('.subtal');

         var res = 0;

         for(var i=0,len=asubtotal.length;i<len;i++){

             res += parseFloat(asubtotal[i].innerHTML);

         };

         return res;

     };

     // 寻找购物车中已经选中的产品的最大单价

     cart.prototype.compareMaxunit = function(){

         var anum = document.querySelectorAll('.num');

         var aunit = document.querySelectorAll('.unit');

         var temp = 0;

         for(var i=0,len=anum.length;i<len;i++){

             if(anum[i].innerHTML!=0){

                 if(temp<parseFloat(aunit[i].innerHTML)){

                     temp = parseFloat(aunit[i].innerHTML);

                 }

             }

         };

         return temp;

     };

     // 点击“+”号按钮触发的购物车商品数量，花费，最大价格的变动

     cart.prototype.plus = function(obtn){

         var onum = obtn.parentNode.querySelector('.num');

         var n = parseInt(onum.innerHTML);

         onum.innerHTML = ++n ;

         this.totalnum++;

         var oUnit = obtn.parentNode.parentNode.parentNode.querySelector('.unit');

         var osubtotal = obtn.parentNode.parentNode.parentNode.querySelector('.subtal');

         osubtotal.innerHTML = this.getsubtotal(onum.innerHTML,oUnit.innerHTML);

         this.ogood_num.innerHTML = this.totalnum;

         this.opricetal.innerHTML = this.gettotal();

         this.opricest.innerHTML = this.compareMaxunit();

     };

     // 点击“-”号按钮触发的购物车商品数量，花费，最大价格的变动

      cart.prototype.minus = function(obtn){

         var onum = obtn.parentNode.querySelector('.num');

         if(parseInt(onum.innerHTML)>0){

             var n = parseInt(onum.innerHTML);

             onum.innerHTML = --n ;

             this.totalnum--;

             var oUnit = obtn.parentNode.parentNode.parentNode.querySelector('.unit');

             var osubtotal = obtn.parentNode.parentNode.parentNode.querySelector('.subtal');

             osubtotal.innerHTML = this.getsubtotal(onum.innerHTML,oUnit.innerHTML);

             this.ogood_num.innerHTML = this.totalnum;

             this.opricetal.innerHTML = this.gettotal();

             this.opricest.innerHTML = this.compareMaxunit();

         }

     };

     // 获取已买商品的总计数量

     cart.prototype.getNumbertal = function(){

          var anum = document.querySelectorAll('.num');

          var res_num = 0;

          for(var i =0;i<anum.length;i++){

              res_num += parseInt( anum[i].innerHTML ) ;

          }

          return res_num ;

     }

     // 删除按钮触发的购物车商品数量，花费，最大价格的变动

     cart.prototype.del = function(obtn){

         var odel = obtn.parentNode.parentNode;

         var oparent = odel.parentNode;

         oparent.removeChild(odel);

         this.ogood_num.innerHTML = this.getNumbertal();

         this.opricetal.innerHTML = this.gettotal();

         this.opricest.innerHTML = this.compareMaxunit();

         this.xuhaosort();

     }

     // 购物车序号重新排序

     cart.prototype.xuhaosort = function(){

         var axuhao = document.querySelectorAll('.xuhao');

         for(var i=0,len=axuhao.length;i<len;i++){

             axuhao[i].innerHTML = i+1;

         }

     }

     // 绑定“+”，“-”，删除按钮的点击事件

     cart.prototype.bind = function(){

         var that = this ;

         for(var i=0;i<this.abtn.length;i++){

             if(i%2 !=0){

                 this.abtn[i].onclick = function(){

                     that.plus(this);

                 }

             }else{

                  this.abtn[i].onclick = function(){

                     that.minus(this);

                 }

             }

         };

         var delbtn = document.querySelectorAll('.del');

         for(var i=0;i<delbtn.length;i++){

             delbtn[i].onclick = function(){

                 that.del(this);

             }

         }

     };

     var oCart = new cart();

     oCart.bind();

 }

运行结果：

点击“-”号按钮结果：

点击“+”号按钮结果：

点击“删除”按钮结果：

js 购物车的实现的更多相关文章

简单实用angular.js购物车功能
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
js购物车计算价格
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta nam ...
vue.js购物车
vue.js https://cn.vuejs.org/v2/guide/ 简单购物车 <html> <head> <script src="https://c ...
原生JS 购物车及购物页面的cookie使用
////////////////////////////////////购物页面 <!DOCTYPE html><html lang="en"><he ...
JS购物车编辑
实现了:第一件商品的加减实现了:全选/全不选(使用prop而不是attr)实现了:删除(遮罩层) 未实现:第二件商品的删除未实现:小计及应付款额的初始化(写死的) 计算小数乘法时,要先乘100 < ...
js 购物车中，多件商品数量加减效果修改，实现总价随数量加减改变
<!DOCTYPE html> <html> <head> <meta charset=UTF-8 /> <title>无标题文档</ ...
js 购物车的数量加减，对应的总价也随机变化
html相关的源码: <div class="goods_num clearfix"> <div class="num_name fl"> ...
Vue node.js商城-购物车模块
一.渲染购物车列表页面新建src/views/Cart.vue获取cartList购物车列表数据就可以在页面中渲染出该用户的购物车列表数据 data(){ return { car ...
shoppingCart.js
ylbtech-JavaScript-util: shoppingCart.js 购物车脚本 1.A,JS-效果图返回顶部 1.B,JS-Source Code(源代码)返回顶部 1.B.1,m. ...

随机推荐

python：数据类型
一.数据类型 1.数字int型主要进行计算 bit_length() 当十进制用二进制表示时,最少使用的位数 a = 13 b = a.bit_length() print (b) 2.布尔值boo ...
Sep 15th 2018
人在最困难的最孤独的时候,是否都会有过怀疑和产生退缩的念头呢.开始怀疑为什么要坚持,坚持的意义何在.我现在的状态就是一个谋生赚钱的机器吗,远离妻子和孩子,一人孤独的在这座城市,得到的难道能够足以弥补所 ...
关于dict的formkeys方法注意
使用容器中的元素生成k, v为统一值, 指向同一个内存地址默认值指向同一个内存, 修改就全部修改 strvar = 'abcd' listvar = [] dictvar = {} dictvar ...
您无法登陆系统。原因可能是您的用户记录或所属的业务部门在Microoft Dynamics CRM中已被禁用
问题发生在CRM 4.0 上 1 用户所在办事处及办事处上级被禁用. 2 如果已经重新启用了,还是报这个错误. 可以把停用的办事处及相关下级再重新--停用--启用一次试试. 3 如果还是报错,查看是否 ...
第10课 std::bind和std::function（1）_可调用对象
1. 几种可调用对象(Callable Objects) (1)普通函数指针或类成员的函数指针 (2)具有operator()成员函数的类对象(仿函数).如c++11中的std::function类模 ...
绘制字母和数字组合的验证码（原生php）
<?php $font = array('font/FZZQJW.TTF','font/STHUPO.TTF');//字体 $str = '689acdefhjkmnpqrtuvwxyACDEF ...
MySql存储过程与函数详解
存储过程和函数是在数据库中定义一些SQL语句的集合,然后直接调用这些存储过程和函数来执行已经定义好的SQL语句.存储过程和函数可以避免开发人员重复的编写相同的SQL语句.而且,存储过程和函数是在MyS ...
HDFS分布式文件系统
hadoop致力于构建在廉价的商用服务器上多副本存储策略(副本数存多少合适) 常见是数据访问方式:流式数据访问(更适合大数据的访问) 随机数据访问(更适合传统的关系型数据库的访问)
vue写后台管理系统问题概述和解决方案
一个不错的Demo; http://xmall.exrick.cn/#/home 源码:https://gitee.com/Exrick/xmall-front/blob/master/src/pag ...
读取txt文件赋值到DataGridView中
先查看txt是每条信息之间是通过什么分割,我是通过换行符(\n)分割的, 然后再看每一条信息中字段是通过什么分割,我的字段是通过 tab键(\t)分割. 第一步先获取到txt文件的路径: //获取绝 ...

js 购物车的实现

js 购物车的实现的更多相关文章

随机推荐

热门专题