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