JavaScript
搜索
分类

JavaScript实现简易购物车最全代码解析(ES6面向对象)

作者：飒尔 时间：2024-04-16 10:40:11　

本文实例为大家分享了JavaScript实现简易购物车的具体代码，供大家参考，具体内容如下

JavaScript实现简易购物车最全代码解析(ES6面向对象)

代码：


<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>ES6购物车</title>
 <style type="text/css">
  table {
   width: 50％;
   position: relative;
   margin: 0px auto;
   border-collapse: collapse;
   border: 1px solid gray;
   box-sizing: border-box;
  }
  th {
   background-color: coral;
   height: 2.5em;
   margin: 0 auto;
  }
  tr {
   height: 2.5em;
   margin: 0 auto;
   text-align: center;
  }
  .box {
   margin: auto;
   width: 50％;
  }
 </style>
</head>
<body>
 <h3 style="text-align: center;margin-top: 100px;">猜你喜欢</h3>
 <table border="1px" id="update-table">
  <tbody>
  <tr>
   <th>序号</th>
   <th>商品名称</th>
   <th>单价</th>
   <th>操作</th>
  </tr>
  <tr class="update-goods">
   <td>1</td>
   <td>肉夹馍</td>
   <td>8</td>
   <td><input type="button" class="update" value="加入购物车" /></td>
  </tr>
  <tr class="update-goods">
   <td>2</td>
   <td>擀面皮</td>
   <td>6</td>
   <td><input type="button" class="update" value="加入购物车" /></td>
  </tr>
  <tr class="update-goods">
   <td>3</td>
   <td>冰封</td>
   <td>3</td>
   <td><input type="button" class="update" value="加入购物车" /></td>
  </tr>
  <tr class="update-goods">
   <td>4</td>
   <td>羊肉泡馍</td>
   <td>25</td>
   <td><input type="button" class="update" value="加入购物车" /></td>
  </tr>
  </tbody>
 </table>
 <h3 style="text-align: center;">购物车</h3>
 <table border="1px" id="goods">
  <tbody>
   <tr>
    <th>序号</th>
    <th>商品名称</th>
    <th>数量</th>
    <th>单价</th>
    <th>小计</th>
    <th>操作</th>
   </tr>
   <tr>
    <td>1</td>
    <td>肉夹馍</td>
    <td>
     <button type="button">-</button>
     <span class="goods-num">0</span>
     <button type="button">+</button>
    </td>
    <td>
     单价:<span class="goods-price">8</span>
    </td>
    <td>
     小计:<span class="goods-single-price">0</span>
    </td>
    <td>
     <input type="button" class="deled" value="删除" />
    </td>
   </tr>
   <tr>
    <td>2</td>
    <td>擀面皮</td>
    <td>
     <button type="button">-</button>
     <span class="goods-num">0</span>
     <button type="button">+</button>
    </td>
    <td>
     单价:<span class="goods-price">6</span>
    </td>
    <td>
     小计:<span class="goods-single-price">0</span>
    </td>
    <td>
     <input type="button" class="deled" value="删除" />
    </td>
   </tr>
   <tr>
    <td colspan="5">
     一共<span id="goods-total-num">0</span>件商品,共计花费<span id="goods-total-price">0</span>元。
    </td>
   </tr>
  </tbody>
 </table>
</body>
</html>
<script type="text/javascript">
class Cart {
 constructor() {
  this.eventBind();
 }
 //获取并更新商品总数量
 getGoodsNumAndUpdate() {
  //获取所有商品的数量
  let oGoodsNum = document.getElementsByClassName("goods-num");
  //存放商品数量叠加的总值
  let goodsTotalNum = 0;
  //循环所有商品
  for (let i = 0; i < oGoodsNum.length; i++) {
   //将所有循环到的商品数量相加
   goodsTotalNum += Number(oGoodsNum[i].innerHTML);
  }
  //获取总结栏的商品总数
  let oGoodsTotalNum = document.getElementById("goods-total-num");
  //将循环所得商品数量之和赋给总结栏商品总数
  oGoodsTotalNum.innerHTML = goodsTotalNum;
 }
 //获取并更新总货物总价格
 getGoodsPriceAndUpdate() {
  //获取小计
  let oGoodsSinglePrice = document.getElementsByClassName("goods-single-price");
  //新创建一个元素接受小计的数值(用于最后赋值给获取小计的元素)
  let goodsTotalPrice = 0 ;
  //循环所有小计
  for (let i = 0; i < oGoodsSinglePrice.length; i++) {
   //将所有循环到的小计数量相加
   goodsTotalPrice += Number(oGoodsSinglePrice[i].innerHTML);
  }
  //获取总结栏的价格总数
  let oGoodsTotalPrice = document.getElementById("goods-total-price");
  //将循环所得小计数量之和赋给总结栏价格总数
  oGoodsTotalPrice.innerHTML = goodsTotalPrice;
 }
 //2.获取小计
 getSinglePrice(num, price) {
  //每行小计数等于单价与本行商品之积
  return num * price;
 }
 //加号按钮方法
 addGoods(btn) {
  //获取加号上一个兄弟元素(中间数值)
  let oGoodsNum = btn.previousElementSibling;
  //1.点击后数值加一
  oGoodsNum.innerHTML = Number(oGoodsNum.innerHTML) + 1;
  //获取单价(btn父元素的下一个元素的子元素)
  let oPrice = btn.parentNode.nextElementSibling.firstElementChild;
  //获取小计(btn父元素的下一个元素的下一个元素的子元素)
  let oSinglePrice = btn.parentNode.nextElementSibling.nextElementSibling.firstElementChild;
  //2.重新获取小计数值并赋给小计
  oSinglePrice.innerHTML = this.getSinglePrice(oGoodsNum.innerHTML, oPrice.innerHTML);
  //3.获取并更新商品总数量(调用重新执行>刷新数据)
  this.getGoodsNumAndUpdate();
  //4.获取并更新总货物总价格(调用重新执行>刷新数据)
  this.getGoodsPriceAndUpdate();
 }
 //减号按钮方法
 minGoods(btn) {
  //获取减号下一个兄弟元素(中间数值)
  let oGoodsNum = btn.nextElementSibling;
  //判断如果商品数量大于零
  if (oGoodsNum.innerHTML > 0) {
   //1.点击后数值减一
   oGoodsNum.innerHTML = oGoodsNum.innerHTML - 1;
   //获取单价(btn父元素的下一个元素的子元素)
   let oPrice = btn.parentNode.nextElementSibling.firstElementChild;
   //获取小计(btn父元素的下一个元素的下一个元素的子元素)
   let oSinglePrice = btn.parentNode.nextElementSibling.nextElementSibling.firstElementChild;
   //2.重新获取小计数值并赋给小计
   oSinglePrice.innerHTML = this.getSinglePrice(oGoodsNum.innerHTML, oPrice.innerHTML);
   //3.获取并更新商品总数量(调用重新执行>刷新数据)
   this.getGoodsNumAndUpdate();
   //4.获取并更新总货物总价格(调用重新执行>刷新数据)
   this.getGoodsPriceAndUpdate();
  }
 }
 //删除按钮方法
 delGoods(btn) {
  //获取购物车table元素
  let god = document.getElementById("goods");
  //获取此按钮父元素的父元素
  let oTr = btn.parentNode.parentNode;
  //然后删除此元素(在此指按钮选择的整个tr元素)
  oTr.remove();
  //重新排序号(循环名为god的table元素下的所有子元素tr)(从第二个子元素开始,并且去掉最后一个小计行)
  for (let i = 1; i < god.firstElementChild.children.length - 1; i++) {
   //将循环之后的元素数值i赋值给名为god的table元素下的子元素tr下的第一个子元素td
   god.firstElementChild.children[i].firstElementChild.innerHTML = i;
  }
  //3.获取并更新商品总数量(调用重新执行>刷新数据)
  this.getGoodsNumAndUpdate();
  //4.获取并更新总货物总价格(调用重新执行>刷新数据)
  this.getGoodsPriceAndUpdate();
 }

//添加订单方法
 update() {
  //获取所有类名为update的元素
  let btn = document.getElementsByClassName("update");
  //获取所有id名为update-table的元素
  let updateTable = document.getElementById("update-table");
  //获取购物车table元素
  let god = document.getElementById("goods");
  //获取购物车table元素的第一个子元素tbody的所有子元素tr
  let gods = god.firstElementChild.children;
  //目标元素赋值为false
  let flag = false;
  //这个this是为了避免在事件体内cart的对象被覆盖
  let that = this;
  //循环所有类名为update的元素
  for (let i = 0; i < btn.length; i++) {
   //类名为update的点击事件
   btn[i].onclick = function() {
    //循环购物车table元素的第一个子元素tbody的所有子元素tr
    for (let j = 0; j < gods.length - 1; j++) {
     //循环判断菜单中是否有这个菜,如果有这个菜则加1;
     //本意为在购物车寻找相同名称的商品如果有则执行购物车的这条数据商品数量+1;如果没有则使flag为true跳出判断
     //this是类名为update元素input标签
     //购物车table中所有子元素tr遍历 下的第一个子元素的内容==类名为update元素input的父元素td的上一个兄弟元素的上一个兄弟元素的内容 时执行
     if (gods[j].children[1].innerHTML == this.parentNode.previousElementSibling.previousElementSibling.innerHTML) {
      //购物车table中所有子元素tr遍历 下的第二个子元素的内容(即为购物车中商品的数量)+1
      gods[j].children[2].children[1].innerHTML = " " + (Number(gods[j].children[2].children[1].innerHTML) + 1) + " ";
      //购物车table中所有子元素tr遍历 下的第四个子元素的内容(即为购物车中小计的数值被赋值)
      gods[j].children[4].innerHTML = '小计:<span class="goods-single-price">' +
      gods[j].children[2].children[1].innerHTML * gods[j].children[3].firstElementChild.innerHTML + '</span>';
      //3.获取并更新商品总数量(调用重新执行>刷新数据)
      that.getGoodsNumAndUpdate();
      //4.获取并更新总货物总价格(调用重新执行>刷新数据)
      that.getGoodsPriceAndUpdate();
      //给flag赋值为false
      flag = false;
      //跳出本次循环
      break;
     } else {
     //购物车table中所有子元素tr遍历 下的第一个子元素的内容!=类名为update元素input的父元素td的上一个兄弟元素的上一个兄弟元素的内容 时执行
     //赋值给flag为true
      flag = true;
     }
    }
    if (flag) {
     //如果没有这个菜则添加
     //创建一个节点tr
     let tr = document.createElement("tr");
     //添加这个节点的内容
     tr.innerHTML=
      '<td>'+(gods.length-1)+'</td>'+
      '<td>'+this.parentNode.previousElementSibling.previousElementSibling.innerHTML+
      '</td><td><button type="button">-</button><span class="goods-num"> 1 </span><button type="button"> +</button></td><td>单价:<span class="goods-price">' +
      this.parentNode.previousElementSibling.innerHTML +
      '</span></td><td>小计:<span class="goods-single-price">' +
      this.parentNode.previousElementSibling.innerHTML +
      '</span></td><td><input type="button" class="deled" value="删除" /></td>';
      //给tbody里添加新元素
     god.firstElementChild.insertBefore(tr, god.firstElementChild.lastElementChild);
     //触发事件按钮
     that.eventBind();
     //3.获取并更新商品总数量(调用重新执行>刷新数据)
     that.getGoodsNumAndUpdate();
     //4.获取并更新总货物总价格(调用重新执行>刷新数据)
     that.getGoodsPriceAndUpdate();
    }
   }
   //重新排猜你喜欢里的商品序号
   for (let i = 1; i < updateTable.firstElementChild.children.length; i++) {
    //排好的数值赋值给新添加的商品序号值
    updateTable.firstElementChild.children[i].firstElementChild.innerHTML = i;
   }
  }
 }
 //触发事件按钮
 eventBind() {
  //获取所有标签名为botton的按钮
  let oBtns = document.getElementsByTagName("button");
  //这个this是为了避免在事件体内cart的对象被覆盖
  let that = this;
  //循环所有botton按钮
  for (let i = 0; i < oBtns.length; i++) {
   if (i ％ 2) {//为奇数时触发addGoods()方法
    oBtns[i].onclick = function() {
     that.addGoods(this);
    }
   } else {//为偶数时触发minGoods()方法
    oBtns[i].onclick = function() {
     that.minGoods(this);
    }
   }
  }
  //获取所有类名为deled的元素
  let oDelBtns = document.getElementsByClassName("deled");
  //循环所有deled元素
  for (let i = 0; i < oDelBtns.length; i++) {
   //deled元素的点击事件
   oDelBtns[i].onclick = function() {
    //调用delGoods()方法执行删除效果
    that.delGoods(this);
   }
  }
  //调用添加订单
  this.update();
 }
}
let c = new Cart();
</script>

来源：https://blog.csdn.net/CSErtuh/article/details/120173639

标签：js,购物车
0
投稿

猜你喜欢

  • asp和php页面全面封杀WVS扫描器的代码

    2011-02-28 10:43:00

  • python用类实现文章敏感词的过滤方法示例

    2022-04-10 19:30:25

  • jQuery 1.4官方中文手册[译]

    2010-01-20 10:46:00

  • Pycharm设置去除显示的波浪线方法

    2022-06-29 16:04:59

  • 详细介绍基于MySQL的搜索引擎MySQL-Fullltext

    2024-01-27 16:30:30

  • 提高MySQL查询效率的三个技巧

    2009-02-11 13:19:00

  • vue props 一次传多个值实例

    2024-05-03 15:10:32

  • 儿童编程python入门

    2021-03-12 15:25:06

  • jquery表单验证使用插件formValidator

    2023-07-02 05:30:54

  • Go语言基于HTTP的内存缓存服务的实现

    2024-05-21 10:25:12

  • 运用Python快速的对MySQL数据库进行重命名

    2024-01-17 22:36:25

  • 如何使用Python修改matplotlib.pyplot.colorbar的位置以对齐主图

    2021-09-28 18:01:30

  • 将Python代码打包为jar软件的简单方法

    2023-10-25 17:46:34

  • Python性能提升之延迟初始化

    2021-05-23 14:22:06

  • Oracle与MySQL删除字段时对索引和约束的处理

    2008-12-26 16:41:00

  • Django如何继承AbstractUser扩展字段

    2023-08-24 06:19:27

  • CentOS安装mysql5.7 及简单配置教程详解

    2024-01-21 08:18:51

  • oracle数据库sql的优化总结

    2024-01-23 16:05:11

  • Nodejs实现短信验证码功能

    2024-05-08 09:37:32

  • python使用opencv对图像mask处理的方法

    2021-05-03 03:23:19
    • asp之家 网络编程 m.aspxhome.com