JavaScript如何用面向对象的方式写一个简单的购物车
话不多说先上效果图：
HTML代码：
<h2>有钱就是任性</h2>
<table id="GWC" border="1">
<tr>
<th>商品名称</th>
<th>数量</th>
<th>单价</th>
<th>小计</th>
<th>操作</th>
</tr>
<tr>
<td class="shopname">辣鸡小炒肉</td>
<td>
<button class="butt" type="button">-</button>
<span class="Num">0</span>
<button class="butt" type="button">+</button>
</td>
<td>单价：<span class="price">20</span></td>
<td>小计：<span class="total">0</span></td>
<td>操作：<input class="del" type="button" value="删除"></td>
</tr>
<tr>
<td class="shopname">老婆饼</td>
<td>
<button class="butt" type="button">-</button>
<span class="Num">0</span>
<button class="butt" type="button">+</button>
</td>
<td>单价：<span class="price">10</span></td>
<td>小计：<span class="total">0</span></td>
<td>操作：<input class="del" type="button" value="删除"></td>
</tr>
<tr>
<td colspan="5" style="text-align: center;">共<span id="goodsNum">0</span>件商品，总共花费<span id="moneyNum">0</span>元</td>
</tr>
</table>
<hr>
<h2>菜单</h2>
<table id="CD" border="1">
<tr>
<th>商品名称</th>
<th>单价</th>
<th>操作</th>
</tr>
<tr>
<td>陕西肉夹馍</td>
<td>单价：<span class="CDprice">9</span></td>
<td>操作：<input class="CDadd" type="button" value="添加"></td>
</tr>
<tr>
<td>宫保鸡丁</td>
<td>单价：<span class="CDprice">25</span></td>
<td>操作：<input class="CDadd" type="button" value="添加"></td>
</tr>
<tr>
<td>鱼香肉丝</td>
<td>单价：<span class="CDprice">22</span></td>
<td>操作：<input class="CDadd" type="button" value="添加"></td>
</tr>
<tr>
<td>蓝莓山药</td>
<td>单价：<span class="CDprice">25</span></td>
<td>操作：<input class="CDadd" type="button" value="添加"></td>
</tr>
<tr>
<td>水煮肉片</td>
<td>单价：<span class="CDprice">40</span></td>
<td>操作：<input class="CDadd" type="button" value="添加"></td>
</tr>
<tr>
<td>老碗鱼</td>
<td>单价：<span class="CDprice">55</span></td>
<td>操作：<input class="CDadd" type="button" value="添加"></td>
</tr>
<tr>
<td>大盘鸡</td>
<td>单价：<span class="CDprice">70</span></td>
<td>操作：<input class="CDadd" type="button" value="添加"></td>
</tr>
</table>
css样式：
h2{
text-align: center;
}
table{
margin: 0 auto;
border-collapse: collapse;
}
JavaScript代码：
class Cart{
getTotalNum(){//获取遍历每个商品数量 并把每个商品数量加起来赋给总计商品数
let Num = document.getElementsByClassName("Num");
let goodsnum = 0;
for(let i=0;i<Num.length;i++){
goodsnum += Number(Num[i].innerHTML);
}
let OgoodsNum = document.getElementById("goodsNum");
OgoodsNum.innerHTML = goodsnum;
}
gettotal(){//获取每个商品的小计 并把每个商品小计加起来赋给总计
let total = document.getElementsByClassName("total");
let goodsTotal = 0;
for(let i=0;i<total.length;i++){
goodsTotal += Number(total[i].innerHTML);
}
let moneyNum = document.getElementById("moneyNum");
moneyNum.innerHTML = goodsTotal;
}
countTotal(mun,price){//计算小计
return(mun*price);
}
addgoods(but){//点击加按钮让数字累加
let OaddNum = but.previousElementSibling;//获取Num元素
OaddNum.innerHTML = Number(OaddNum.innerHTML)+1;//点击一次让元素内容加一
//找单价节点
let OgoodsPrice = but.parentNode.nextElementSibling.firstElementChild;
//找小计节点
let OTotal = but.parentNode.nextElementSibling.nextElementSibling.firstElementChild;
//计算小计
OTotal.innerHTML = this.countTotal(OaddNum.innerHTML,OgoodsPrice.innerHTML);
this.getTotalNum();
this.gettotal();
}
mingoods(but){
let OminNum = but.nextElementSibling;//获取Num元素
if(OminNum.innerHTML>0){
OminNum.innerHTML = OminNum.innerHTML-1;//点击一次让元素内容减一
//找单价节点
let OgoodsPrice = but.parentNode.nextElementSibling.firstElementChild;
//找小计节点
let OTotal = but.parentNode.nextElementSibling.nextElementSibling.firstElementChild;
//计算小计
OTotal.innerHTML = this.countTotal(OminNum.innerHTML,OgoodsPrice.innerHTML);
this.getTotalNum();
this.gettotal();
}
}
deltr(but){
let Otr = but.parentNode.parentNode;
Otr.remove();
this.getTotalNum();
this.gettotal();
}
//----------------------------------------------------------------
//菜单功能
//添加
Oadd(CDbut){
let that = this;
//获取菜单中商品名称
let OCDshoop = CDbut.parentNode.parentNode.firstElementChild;
//获取菜单单价
let OCSprice = CDbut.parentNode.previousElementSibling.firstElementChild;
//动态创建
let Otbody = document.getElementById("GWC").firstElementChild;//获取tbody
let Olasttr = Otbody.lastElementChild;//获取购物车最后一行
let Otr = document.createElement("tr");//创建tr
let OCDpName = document.getElementsByClassName("shopname");//获取购物车中所有的商品名
let Oflagtext = false;//假设列表无重复
for(let i=0;i<OCDpName.length;i++){
if(OCDpName[i].innerHTML==OCDshoop.innerHTML){
//如果有重复的将按钮作为实参传递，调用添加商品函数
that.addgoods(OCDpName[i].nextElementSibling.lastElementChild);
Oflagtext=true;
break;
}
}
if(Oflagtext == false){
Otr.innerHTML=
`<td class="shopname">${OCDshoop.innerHTML}</td>
<td>
<button class="butt" type="button">-</button>
<span class="Num">0</span>
<button class="butt" type="button">+</button>
</td>
<td>单价：<span class="price">${OCSprice.innerHTML}</span></td>
<td>小计：<span class="total">0</span></td>
<td>操作：<input class="del" type="button" value="删除"></td>
`
Otbody.insertBefore(Otr,Olasttr);//将tr添加到tbody中倒数一行的之前
that.eventbind();
}
}
eventbind(){
let that = this;//this指的是调用它的函数
//点击购物车里的加减
let Obut = document.getElementsByClassName("butt");
for(let i=0;i<Obut.length;i++){
if(i%2){
Obut[i].onclick = function(){
that.addgoods(this);
}
}else{
Obut[i].onclick = function(){
that.mingoods(this);
}
}
}
//点击购物车里的删除
let Odel = document.getElementsByClassName("del");
for(let i=0;i<Odel.length;i++){
Odel[i].onclick = function(){
var qr = confirm("亲，你真的要删除吗？");
if(qr==true){
that.deltr(this);
}
}
}
//点击菜单里的加减按钮
let OCDbut = document.getElementsByClassName("CDbutt");
for(let i=0;i<OCDbut.length;i++){
if(i%2){
OCDbut[i].onclick = function(){
that.CDaddgoods(this);
}
}else{
OCDbut[i].onclick = function(){
that.CDmingoods(this);
}
}
}
//点击菜单里的添加
let OCDadd = document.getElementsByClassName("CDadd");
for(let i=0;i<OCDadd.length;i++){
OCDadd[i].onclick = function(){
that.Oadd(this);
}
}
}
}
let c = new Cart();
c.eventbind();