JavaScript实现简易购物车最全代码解析(ES6面向对象)
作者：飒尔 发布时间：2024-04-16 10:40:11
标签：js,购物车
本文实例为大家分享了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>
来源：https://blog.csdn.net/CSErtuh/article/details/120173639
0
投稿猜你喜欢
前面给大家分享了pandas.merge用法详解，这节分享pandas数据合并处理的姊妹篇，pandas.concat用法详解，参考利用Py- CSV文件是一种纯文本文件，它使用特定的结构来排列表格数据。CSV文件内容看起来应该是下面这样的：column 1 name,column
- 痛点json 是当前最常用的数据传输格式之一，纯文本，容易使用，方便阅读，在通信过程中大量被使用。 你是否遇到过json中某个字段
- PIL：Python Imaging Library，已经是Python平台事实上的图像处理标准库了。PIL功能非常强大，但API却非常简单
- 1.插入语句1.1插入一行有两种：1.以小括号的形式这里注意：如果表名后边不加小括号对应内容，那么默认就是添加所有列2.以set形式inse
- Python字典的key都可以是什么答一个对象能不能作为字典的key，就取决于其有没有__hash__方法。所以所有python自带类型中，
- poi介绍：Apache POI是用Java编写的免费开源的跨平台的Java API，Apache POI提供API给Java程序对Micr
- 实现网页的键盘输入操作from selenium.webdriver.common.keys import Keys * 页有时需要将鼠标
- 为了庆祝自己的博客重新开放，我在这里放一个自己刚刚写的jquery日期插件, 也许人们会说：日期选取插件已
- 1.游戏画面1.1开始1.2射击怪物2.涉及知识点1.sprites2.pygame混音器3.图章 4.python
- 这篇文章主要介绍了python如何使用jt400.jar包代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价
- 本文实例讲述了JS实现求5的阶乘运算操作。分享给大家供大家参考，具体如下：方案一：利用while循环function factorial(n
- TF-IDF（term frequency–inverse document frequency）是一种用于信息检索（information
- 一. 背景介绍当集团的MySQL数据库实例数达到2000+、MHA集群规模数百个时，对MHA的及时、高效管理是DBA必须面对的一个挑战。MH
- Python实现12306火车票抢票系统效果图如下所示：具体代码如下所示：import urllib.request as request
- 在Python中，很多对象都是可以通过for语句来直接遍历的，例如list、string、dict等等，这些对象都可以被称为可迭代对象。至于
- 在开发测试平台的时候，虽然对某些关键功能做了权限设置，但毕竟是公司多人使用，有些数据的配置可能不小心被他人修改但未告知其他使用者，造成了诸多
- 前言最近开始学习python数据库编程后，在了解了基本概念，打算上手试验一下时，卡在了MYSQLdb包的安装上，折腾了半天才解决。记录一下我
- jQuery 真是一个非常伟大的 javascript library，至少在我不会写 JS 的时候第一时间接触了它，虽然还有其他很多优秀的
- 在实际工作中，有时候需要对判断字符串是否为合法的json格式解决方法使用json.loads,这样更加符合‘Pythonic'写法代
