码迷,mamicode.com
首页 > 其他好文 > 详细

原生JavsScript实现简单购物车【面向对象】【原生代码】

时间:2020-08-01 12:41:42      阅读:75      评论:0      收藏:0      [点我收藏+]

标签:splay   oat   html   ash   display   http   nbsp   inpu   innerhtml   

原生js实现购物车功能 —面向对象;

  购物车在电商网站基本都需要用到,今天我们用面向对象编程思想来写一个购物车

  首先,我们先来看一下要实现的效果:

技术图片

 

 

 

 

 

 

 

 

 

我们来从明面上分析下这个程序的需求:

  1.购物车肯定要有增加以及减少货物数量的功能;

  2.具有删除货物的功能

  3.添加菜单的功能

  这是我们可以看到的功能,那么现在开始上代码吧;

 

我们先完成HTML页面:

 <!DOCTYPE html>
 <html lang="en">
 
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
     <style>
         * {
             margin: 0;
             padding: 0;
         }
 
         table {
             width: 800px;
             text-align: center;
             margin: 40px auto;
             border: 1px solid black;
         }
 
         th {
             height: 50px;
             background: #98FB98;
             border: 1px solid black;
         }
 
         td {
             height: 50px;
             border: 1px solid black;
 
         }
 
         button {
             width: 20px;
             height: 20px;
         }
     </style>
 </head>
 
 <body>
     <table class="tab">
         <tr>
             <th>序号</th>
             <th>商品名称</th>
             <th>数量</th>
             <th>单价</th>
             <th>小计</th>
             <th>操作</th>
         </tr>
         <tr>
             <td class="other">1</td>
             <td class="MenuName">麻辣香锅</td>
             <td><button>-</button><span class="numberOf">0</span><button>+</button></td>
             <td>单价:<span>18</span></td>
             <td>小计:<span class="HowSubtotal">0</span></td>
             <td>操作:<input type="button" value="删除" class="del"></td>
         </tr>
         <tr>
             <td class="other">2</td>
             <td class="MenuName">红烧排骨</td>
             <td><button>-</button><span class="numberOf">0</span><button>+</button></td>
             <td>单价:<span>25</span></td>
             <td>小计:<span class="HowSubtotal">0</span></td>
             <td>操作:<input type="button" value="删除" class="del"></td>
         </tr>
         <tr>
             <td colspan="6">
                 商品一共<span id="ToNumber">0</span>件,共<span id="ToMoney">0</span>元;
             </td>
         </tr>
     </table>
     <table cellspacing="0">
         <tr>
             <th>序号</th>
             <th>商品名称</th>
             <th>单价</th>
             <th>操作</th>
         </tr>
         <tr>
             <td>1</td>
             <td>回锅肉</td>
             <td>单价:<span>19</span></td>
             <td>操作:<input type="button" value="添加" class="add"></td>
         </tr>
         <tr>
             <td>2</td>
             <td>青椒肉丝</td>
             <td>单价:<span>12</span></td>
             <td>操作:<input type="button" value="添加" class="add"></td>
         </tr>
     </table>
 </body>
 
 </html>

 

它现在就是这个样子:

技术图片

 

 

 现在给他添加JavaScript代码让他动起来

 <script>
     class ShoppingCart {
         //获取数量
         NumberOf() {
             let numberOf = document.getElementsByClassName("numberOf");//获取商品页面商品数量
             let oNumber = 0;//给数量一个初始化值
             for (let i = 0; i < numberOf.length; i++) {
                 oNumber += Number(numberOf[i].innerHTML);//拿到总数量=各个商品数量加起来
             }
             // 总数量
             let ToNumber = document.getElementById("ToNumber");
             ToNumber.innerHTML = oNumber;
         }
         //获取金额
         HowMoney() {
             let HowSubtotal = document.getElementsByClassName("HowSubtotal");
             let oHowSubtotal = 0;
             for (let i = 0; i < HowSubtotal.length; i++) {
                 oHowSubtotal += Number(HowSubtotal[i].innerHTML);
             }
             let ToMoney = document.getElementById("ToMoney");
             ToMoney.innerHTML = oHowSubtotal;
         }
         //小计
         Tosubtotal(num, price) {
             return num * price;//小计=数量*单价
         }
         //计算增加
         increase(btn) {
             //数量//通过点击的节点获取
             let NumberOf = btn.previousElementSibling;
             NumberOf.innerHTML = Number(NumberOf.innerHTML) + 1;
             //单价
             let price = btn.parentNode.nextElementSibling.firstElementChild;
             //小计
             let subtotal = btn.parentNode.nextElementSibling.nextElementSibling.firstElementChild;
             subtotal.innerHTML = this.Tosubtotal(NumberOf.innerHTML, price.innerHTML);
             this.NumberOf();
             this.HowMoney();
         }
         // 计算减少
         toReduce(btn) {
             let NumberOf = btn.nextElementSibling;
             //数量
             if (NumberOf.innerHTML > 0) {
                 NumberOf.innerHTML = NumberOf.innerHTML - 1;
                 //单价
                 let price = btn.parentNode.nextElementSibling.firstElementChild;
                 //小计
                 let subtotal = btn.parentNode.nextElementSibling.nextElementSibling.firstElementChild;
                 subtotal.innerHTML = this.Tosubtotal(NumberOf.innerHTML, price.innerHTML);
                 this.NumberOf();
                 this.HowMoney();
             }
         }
         //删除
         Dele(btn) {
             let oTr = btn.parentNode.parentNode;
             oTr.remove();
             this.NumberOf();//删除之后数量会变化所以需要调用数量
             this.HowMoney();//删除之后金额会变化所以要调用金额
             this.other();//调用序号
         }
         //增加菜单
         increaseMenu(btn) {
             // 获取表格
             let oTabl = document.querySelector(".tab");
             // 获取第一个元素
             let firstChi = oTabl.firstElementChild;
             // 获取最后一个元素
             let lastChi = firstChi.lastElementChild;
             // 获取商品名称
             let goodsName = btn.parentNode.previousElementSibling.previousElementSibling;
             // 获取价格
             let googsMoney = btn.parentNode.previousElementSibling.firstElementChild;
             // 创建tr
             let oTr = document.createElement("tr");
             // 添加内容
             oTr.innerHTML = `<td class="other"></td>
             <td class="MenuName">${goodsName.innerHTML}</td>
             <td><button>-</button><span class="numberOf">0</span><button>+</button></td>
             <td>单价:<span>${googsMoney.innerHTML}</span></td>
             <td>小计:<span class="HowSubtotal">0</span></td>
             <td>操作:<input type="button" value="删除" class="del"></td>`
             this.eventAdd();//调用事件
             let flag = false;
             let MenuName = document.getElementsByClassName("MenuName");//获取商品名称
             for (let i = 0; i < MenuName.length; i++) {
                 if (MenuName[i].innerHTML == goodsName.innerHTML) {//判断是否有相同的名称/如果有就数量+1,然后结束循环
                     flag = true;
                     let NumberOf = MenuName[i].nextElementSibling.firstElementChild.nextElementSibling;
                     NumberOf.innerHTML = Number(NumberOf.innerHTML) + 1;
                     let toSubtotal = NumberOf.parentNode.nextElementSibling.nextElementSibling.firstElementChild;
                     toSubtotal.innerHTML = this.Tosubtotal(NumberOf.innerHTML, googsMoney.innerHTML);
                     this.NumberOf();
                     this.HowMoney();
                     break;
                 }
             }
             if (!flag) {
                 firstChi.insertBefore(oTr, lastChi);//如果没有就新添加一行
                 this.other();
                 this.eventAdd();
             }
         }
         //序号
         other() {
             let other = document.getElementsByClassName("other");
             for (let i = 0; i < other.length; i++) {
                 other[i].innerHTML = i + 1;
             }
         }
         //事件
         eventAdd() {
             let that = this;
             //增加/减少商品
             let oBtn = document.getElementsByTagName("button")
             for (let i = 0; i < oBtn.length; i++) {
                 if (i % 2) {
                     oBtn[i].onclick = function () {
                         that.increase(this);
                         console.log("abc")
 
                     }
                 } else {
                     oBtn[i].onclick = function () {
                         that.toReduce(this);
                         console.log("abc")
 
                     }
                 }
             }
             //删除
             let oDel = document.getElementsByClassName("del");
             for (let i = 0; i < oDel.length; i++) {
                 oDel[i].onclick = function () {
                     that.Dele(this);
                 }
             }
             //添加菜单
             let add = document.getElementsByClassName("add");
             for (let i = 0; i < add.length; i++) {
                 add[i].onclick = function () {
                     that.increaseMenu(this);
                 }
             }
         }
     }
     let a = new ShoppingCart();
   a.eventAdd();
</script>

 好了,全部的功能已经实现了,这是利用原生代码实现的简易购物车,当然如果有需求也可以写的更炫酷一点;

原生JavsScript实现简单购物车【面向对象】【原生代码】

标签:splay   oat   html   ash   display   http   nbsp   inpu   innerhtml   

原文地址:https://www.cnblogs.com/xxmx/p/13413971.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!