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

2024-08-20 00:03:36

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

代码：

<!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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

js购物车实现思路及代码(个人感觉不错)

复制代码代码如下: <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServer
原生js模拟淘宝购物车项目实战

本文实例讲述了原生js模拟淘宝购物车实现代码.分享给大家供大家参考.具体如下: 通过JavaScript实现类似与淘宝的购物车效果,包括商品的单选.全选.删除.修改数量.价格计算.数目计算.预览等功能的实现.实现的效果图: 相应的代码: shoppingCart.html <!DOCTYPE html> <html> <head> <meta charset = "UTF-8"> <title>JavaScript实现购物车项
vuejs手把手教你写一个完整的购物车实例代码

由于我们公司是主营业务是海淘,所以每个项目都是类似淘宝天猫之类的商城,那么购物车就是一个重点开发功能模块.介于之前我都是用jq来写购物车的,这次就用vuejs来写一个购物车.下面我就从全选,数量控制器,运费,商品金额计算等方法来演示一下一个能用在实际场景的购物车是怎么做出来的以及记录一下这次用vuejs踩过的坑. 1.一层数据结构-全选下面这段代码和vuejs官网里面checkbox绑定很像.不明白的可以直接上vuejs官网看看. <!DOCTYPE html> <html lang=
Jsp+Servlet实现购物车功能

本文实例为大家分享了Servlet实现购物车功能的具体代码,供大家参考,具体内容如下 (1)用servlet实现简单的购物车系统,项目结构例如以下:(新建web Project项目仅仅须要AddItemServlet , ListItemServlet.exam403.jsp三个文件就可以.其它的不用管) (2)exam403.jsp代码例如以下: <%@ page contentType="text/html; charset=gb2312" language="
JavaScript编写一个简易购物车功能

网上关于购物车实现的代码非常多,今天看了一些知识点,决定自己动手写写,于是写了一个简易购物车,接下来讲解一下具体的实现. 1.用html实现内容: 2.用css修饰外观: 3.用js(jq)设计动效. 第一步:首先是进行html页面的设计,我用一个大的div将所有商品包含,然后用不同的div将不同的商品进行封装,商品列表中我用了ul li实现,具体实现代码如下(代码中涉及到的商品都是网上随便copy的,不具有参考价值): <div id="goods"> <div c
简单的前端js+ajax 购物车框架(入门篇)

今天在公司实在没有事做,突然就想到写下商城的购物车的前端框架,当然我这里只有购物车的增删改查,也许写的并不是那么完善,但最重要的是一个入门,也希望js达人给些建议,好让我更上一个台阶. HOHO~~~开始咯: Js: 复制代码代码如下: //为了省事,就没写自己的js ajax了用了jquery的,当然你也可以添加到jquery的扩展方法内,哈哈,我太懒了,所以就写这里了. var _$ = { AJAX: function (urlparm, d, beforecall, successc
Javascript操纵Cookie实现购物车程序

复制代码代码如下: /***************************************************************************************************** Name 购物车 Version 1.1 Author Vanni(凡林) url:www.27sea.com QQ:303590170 CreateDate 2005-05-31 Description 此类是基于JavaScript和客户端Cookie,请保证客户端开
js实现仿购物车加减效果

效果图: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } body{ overflow-y: auto; } ul{ margin-top: 20px; border-top: 1px solid #666; } h1{ widt
Javascript实现购物车功能的详细代码

我们肯定都很熟悉商品购物车这一功能,每当我们在某宝某东上购买商品的时候,看中了哪件商品,就会加入购物车中,最后结算.购物车这一功能,方便消费者对商品进行管理,可以添加商品,删除商品,选中购物车中的某一项或几项商品,最后商品总价也会随着消费者的操作随着变化. 现在,笔者对购物车进行了简单实现,能够实现真实购物车当中的大部分功能.在本示例当中,用到了javascript中BOM操作,DOM操作,表格操作,cookie,json等知识点,同时,采用三层架构方式对购物车进行设计,对javascript的
js实现简单的购物车有图有代码

如图: 全选按钮的实现为: 复制代码代码如下: <input type="checkbox" name="all" onclick="checkAll()" />全选<br /> <input type="checkbox" name="item" value="3000" />笔记本电脑:3000元<br /> <input t

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

相关推荐

随机推荐