JavaScript實現(xiàn)簡易購物車最全代碼解析(ES6面向?qū)ο?
更新時間：2021年09月10日 10:36:17 作者：颯爾
這篇文章主要為大家詳細(xì)介紹了JavaScript實現(xiàn)簡易購物車最全代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了JavaScript實現(xiàn)簡易購物車的具體代碼，供大家參考，具體內(nèi)容如下
代碼：
<!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>數(shù)量</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();
}
//獲取并更新商品總數(shù)量
getGoodsNumAndUpdate() {
//獲取所有商品的數(shù)量
let oGoodsNum = document.getElementsByClassName("goods-num");
//存放商品數(shù)量疊加的總值
let goodsTotalNum = 0;
//循環(huán)所有商品
for (let i = 0; i < oGoodsNum.length; i++) {
//將所有循環(huán)到的商品數(shù)量相加
goodsTotalNum += Number(oGoodsNum[i].innerHTML);
}
//獲取總結(jié)欄的商品總數(shù)
let oGoodsTotalNum = document.getElementById("goods-total-num");
//將循環(huán)所得商品數(shù)量之和賦給總結(jié)欄商品總數(shù)
oGoodsTotalNum.innerHTML = goodsTotalNum;
}
//獲取并更新總貨物總價格
getGoodsPriceAndUpdate() {
//獲取小計
let oGoodsSinglePrice = document.getElementsByClassName("goods-single-price");
//新創(chuàng)建一個元素接受小計的數(shù)值(用于最后賦值給獲取小計的元素)
let goodsTotalPrice = 0 ;
//循環(huán)所有小計
for (let i = 0; i < oGoodsSinglePrice.length; i++) {
//將所有循環(huán)到的小計數(shù)量相加
goodsTotalPrice += Number(oGoodsSinglePrice[i].innerHTML);
}
//獲取總結(jié)欄的價格總數(shù)
let oGoodsTotalPrice = document.getElementById("goods-total-price");
//將循環(huán)所得小計數(shù)量之和賦給總結(jié)欄價格總數(shù)
oGoodsTotalPrice.innerHTML = goodsTotalPrice;
}
//2.獲取小計
getSinglePrice(num, price) {
//每行小計數(shù)等于單價與本行商品之積
return num * price;
}
//加號按鈕方法
addGoods(btn) {
//獲取加號上一個兄弟元素(中間數(shù)值)
let oGoodsNum = btn.previousElementSibling;
//1.點擊后數(shù)值加一
oGoodsNum.innerHTML = Number(oGoodsNum.innerHTML) + 1;
//獲取單價(btn父元素的下一個元素的子元素)
let oPrice = btn.parentNode.nextElementSibling.firstElementChild;
//獲取小計(btn父元素的下一個元素的下一個元素的子元素)
let oSinglePrice = btn.parentNode.nextElementSibling.nextElementSibling.firstElementChild;
//2.重新獲取小計數(shù)值并賦給小計
oSinglePrice.innerHTML = this.getSinglePrice(oGoodsNum.innerHTML, oPrice.innerHTML);
//3.獲取并更新商品總數(shù)量(調(diào)用重新執(zhí)行>刷新數(shù)據(jù))
this.getGoodsNumAndUpdate();
//4.獲取并更新總貨物總價格(調(diào)用重新執(zhí)行>刷新數(shù)據(jù))
this.getGoodsPriceAndUpdate();
}
//減號按鈕方法
minGoods(btn) {
//獲取減號下一個兄弟元素(中間數(shù)值)
let oGoodsNum = btn.nextElementSibling;
//判斷如果商品數(shù)量大于零
if (oGoodsNum.innerHTML > 0) {
//1.點擊后數(shù)值減一
oGoodsNum.innerHTML = oGoodsNum.innerHTML - 1;
//獲取單價(btn父元素的下一個元素的子元素)
let oPrice = btn.parentNode.nextElementSibling.firstElementChild;
//獲取小計(btn父元素的下一個元素的下一個元素的子元素)
let oSinglePrice = btn.parentNode.nextElementSibling.nextElementSibling.firstElementChild;
//2.重新獲取小計數(shù)值并賦給小計
oSinglePrice.innerHTML = this.getSinglePrice(oGoodsNum.innerHTML, oPrice.innerHTML);
//3.獲取并更新商品總數(shù)量(調(diào)用重新執(zhí)行>刷新數(shù)據(jù))
this.getGoodsNumAndUpdate();
//4.獲取并更新總貨物總價格(調(diào)用重新執(zhí)行>刷新數(shù)據(jù))
this.getGoodsPriceAndUpdate();
}
}
//刪除按鈕方法
delGoods(btn) {
//獲取購物車table元素
let god = document.getElementById("goods");
//獲取此按鈕父元素的父元素
let oTr = btn.parentNode.parentNode;
//然后刪除此元素(在此指按鈕選擇的整個tr元素)
oTr.remove();
//重新排序號(循環(huán)名為god的table元素下的所有子元素tr)(從第二個子元素開始,并且去掉最后一個小計行)
for (let i = 1; i < god.firstElementChild.children.length - 1; i++) {
//將循環(huán)之后的元素數(shù)值i賦值給名為god的table元素下的子元素tr下的第一個子元素td
god.firstElementChild.children[i].firstElementChild.innerHTML = i;
}
//3.獲取并更新商品總數(shù)量(調(diào)用重新執(zhí)行>刷新數(shù)據(jù))
this.getGoodsNumAndUpdate();
//4.獲取并更新總貨物總價格(調(diào)用重新執(zhí)行>刷新數(shù)據(jù))
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;
//目標(biāo)元素賦值為false
let flag = false;
//這個this是為了避免在事件體內(nèi)cart的對象被覆蓋
let that = this;
//循環(huán)所有類名為update的元素
for (let i = 0; i < btn.length; i++) {
//類名為update的點擊事件
btn[i].onclick = function() {
//循環(huán)購物車table元素的第一個子元素tbody的所有子元素tr
for (let j = 0; j < gods.length - 1; j++) {
//循環(huán)判斷菜單中是否有這個菜,如果有這個菜則加1;
//本意為在購物車尋找相同名稱的商品如果有則執(zhí)行購物車的這條數(shù)據(jù)商品數(shù)量+1;如果沒有則使flag為true跳出判斷
//this是類名為update元素input標(biāo)簽
//購物車table中所有子元素tr遍歷 下的第一個子元素的內(nèi)容==類名為update元素input的父元素td的上一個兄弟元素的上一個兄弟元素的內(nèi)容 時執(zhí)行
if (gods[j].children[1].innerHTML == this.parentNode.previousElementSibling.previousElementSibling.innerHTML) {
//購物車table中所有子元素tr遍歷 下的第二個子元素的內(nèi)容(即為購物車中商品的數(shù)量)+1
gods[j].children[2].children[1].innerHTML = " " + (Number(gods[j].children[2].children[1].innerHTML) + 1) + " ";
//購物車table中所有子元素tr遍歷 下的第四個子元素的內(nèi)容(即為購物車中小計的數(shù)值被賦值)
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.獲取并更新商品總數(shù)量(調(diào)用重新執(zhí)行>刷新數(shù)據(jù))
that.getGoodsNumAndUpdate();
//4.獲取并更新總貨物總價格(調(diào)用重新執(zhí)行>刷新數(shù)據(jù))
that.getGoodsPriceAndUpdate();
//給flag賦值為false
flag = false;
//跳出本次循環(huán)
break;
} else {
//購物車table中所有子元素tr遍歷 下的第一個子元素的內(nèi)容!=類名為update元素input的父元素td的上一個兄弟元素的上一個兄弟元素的內(nèi)容 時執(zhí)行
//賦值給flag為true
flag = true;
}
}
if (flag) {
//如果沒有這個菜則添加
//創(chuàng)建一個節(jié)點tr
let tr = document.createElement("tr");
//添加這個節(jié)點的內(nèi)容
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);
//觸發(fā)事件按鈕
that.eventBind();
//3.獲取并更新商品總數(shù)量(調(diào)用重新執(zhí)行>刷新數(shù)據(jù))
that.getGoodsNumAndUpdate();
//4.獲取并更新總貨物總價格(調(diào)用重新執(zhí)行>刷新數(shù)據(jù))
that.getGoodsPriceAndUpdate();
}
}
//重新排猜你喜歡里的商品序號
for (let i = 1; i < updateTable.firstElementChild.children.length; i++) {
//排好的數(shù)值賦值給新添加的商品序號值
updateTable.firstElementChild.children[i].firstElementChild.innerHTML = i;
}
}
}
//觸發(fā)事件按鈕
eventBind() {
//獲取所有標(biāo)簽名為botton的按鈕
let oBtns = document.getElementsByTagName("button");
//這個this是為了避免在事件體內(nèi)cart的對象被覆蓋
let that = this;
//循環(huán)所有botton按鈕
for (let i = 0; i < oBtns.length; i++) {
if (i % 2) {//為奇數(shù)時觸發(fā)addGoods()方法
oBtns[i].onclick = function() {
that.addGoods(this);
}
} else {//為偶數(shù)時觸發(fā)minGoods()方法
oBtns[i].onclick = function() {
that.minGoods(this);
}
}
}
//獲取所有類名為deled的元素
let oDelBtns = document.getElementsByClassName("deled");
//循環(huán)所有deled元素
for (let i = 0; i < oDelBtns.length; i++) {
//deled元素的點擊事件
oDelBtns[i].onclick = function() {
//調(diào)用delGoods()方法執(zhí)行刪除效果
that.delGoods(this);
}
}
//調(diào)用添加訂單
this.update();
}
}
let c = new Cart();
</script>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章給大家分享了JS中判斷字符串存在和非空的方法以及相關(guān)注意點總結(jié)，有興趣的朋友們參考下。2018-09-09
這篇文章給大家介紹了greenbrower用到的function.js代碼集合，感興趣的朋友一起看看吧2007-12-12
微信小程序van-field中的left-icon屬性自定義實現(xiàn)過程
在小程序中，我們是用 Vant 組件庫時，常常會用到 van-field 輸入框控件，今天我將跟大家分享的是 van-field 輸入框控件中的 left-icon 屬性的自定義怎么實現(xiàn)，感興趣的朋友一起看看吧2023-08-08
JavaScript常用進(jìn)制轉(zhuǎn)換及位運算實例解析
這篇文章主要介紹了JavaScript常用進(jìn)制轉(zhuǎn)換及位運算實例解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-10-10
最近用js拼接字符串時遇到問題了，不論怎么拼接在ie中都報錯，于是找到了一個不錯的解決方法，在此與大家分享下2014-03-03
所有的JavaScript事件處理程序的作用域是在其定義時的作用域而非調(diào)用時的作用域中執(zhí)行,并且它們能存取那個作用域中的任何一個本地變量。但是HTML標(biāo)簽屬性注冊處理程序就是一個例外?？聪旅嫠姆N方式2017-03-03
webpack配置proxyTable時pathRewrite無效的解決方法
這篇文章主要介紹了webpack配置proxyTable時pathRewrite無效的解決方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
對于js的一些常見事件的總結(jié)2008-12-12
JS前端面試必備——基本排序算法原理與實現(xiàn)方法詳解【插入/選擇/歸并/冒泡/快速排序】
這篇文章主要介紹了JS前端面試基本排序算法原理與實現(xiàn)方法,結(jié)合實例形式詳細(xì)分析了JS常見的基本排序算法相關(guān)原理、實現(xiàn)方法、時間復(fù)雜度及操作注意事項,需要的朋友可以參考下2020-02-02
JavaScript數(shù)據(jù)結(jié)構(gòu)之廣義表的定義與表示方法詳解
這篇文章主要介紹了JavaScript數(shù)據(jù)結(jié)構(gòu)之廣義表的定義與表示方法,簡單講述了廣義表的原理與相關(guān)概念,并結(jié)合實例形式分析了javascript定義與使用廣義表的相關(guān)操作技巧,需要的朋友可以參考下2017-04-04