JavaScript實(shí)現(xiàn)簡(jiǎn)易購(gòu)物車最全代碼解析(ES6面向?qū)ο?
更新時(shí)間：2021年09月10日 10:36:17 作者：颯爾
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)簡(jiǎn)易購(gòu)物車最全代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了JavaScript實(shí)現(xiàn)簡(jiǎn)易購(gòu)物車的具體代碼，供大家參考，具體內(nèi)容如下
代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ES6購(gòu)物車</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>序號(hào)</th>
<th>商品名稱</th>
<th>單價(jià)</th>
<th>操作</th>
</tr>
<tr class="update-goods">
<td>1</td>
<td>肉夾饃</td>
<td>8</td>
<td><input type="button" class="update" value="加入購(gòu)物車" /></td>
</tr>
<tr class="update-goods">
<td>2</td>
<td>搟面皮</td>
<td>6</td>
<td><input type="button" class="update" value="加入購(gòu)物車" /></td>
</tr>
<tr class="update-goods">
<td>3</td>
<td>冰封</td>
<td>3</td>
<td><input type="button" class="update" value="加入購(gòu)物車" /></td>
</tr>
<tr class="update-goods">
<td>4</td>
<td>羊肉泡饃</td>
<td>25</td>
<td><input type="button" class="update" value="加入購(gòu)物車" /></td>
</tr>
</tbody>
</table>
<h3 style="text-align: center;">購(gòu)物車</h3>
<table border="1px" id="goods">
<tbody>
<tr>
<th>序號(hào)</th>
<th>商品名稱</th>
<th>數(shù)量</th>
<th>單價(jià)</th>
<th>小計(jì)</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>
單價(jià):<span class="goods-price">8</span>
</td>
<td>
小計(jì):<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>
單價(jià):<span class="goods-price">6</span>
</td>
<td>
小計(jì):<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>件商品,共計(jì)花費(fèi)<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;
}
//獲取并更新總貨物總價(jià)格
getGoodsPriceAndUpdate() {
//獲取小計(jì)
let oGoodsSinglePrice = document.getElementsByClassName("goods-single-price");
//新創(chuàng)建一個(gè)元素接受小計(jì)的數(shù)值(用于最后賦值給獲取小計(jì)的元素)
let goodsTotalPrice = 0 ;
//循環(huán)所有小計(jì)
for (let i = 0; i < oGoodsSinglePrice.length; i++) {
//將所有循環(huán)到的小計(jì)數(shù)量相加
goodsTotalPrice += Number(oGoodsSinglePrice[i].innerHTML);
}
//獲取總結(jié)欄的價(jià)格總數(shù)
let oGoodsTotalPrice = document.getElementById("goods-total-price");
//將循環(huán)所得小計(jì)數(shù)量之和賦給總結(jié)欄價(jià)格總數(shù)
oGoodsTotalPrice.innerHTML = goodsTotalPrice;
}
//2.獲取小計(jì)
getSinglePrice(num, price) {
//每行小計(jì)數(shù)等于單價(jià)與本行商品之積
return num * price;
}
//加號(hào)按鈕方法
addGoods(btn) {
//獲取加號(hào)上一個(gè)兄弟元素(中間數(shù)值)
let oGoodsNum = btn.previousElementSibling;
//1.點(diǎn)擊后數(shù)值加一
oGoodsNum.innerHTML = Number(oGoodsNum.innerHTML) + 1;
//獲取單價(jià)(btn父元素的下一個(gè)元素的子元素)
let oPrice = btn.parentNode.nextElementSibling.firstElementChild;
//獲取小計(jì)(btn父元素的下一個(gè)元素的下一個(gè)元素的子元素)
let oSinglePrice = btn.parentNode.nextElementSibling.nextElementSibling.firstElementChild;
//2.重新獲取小計(jì)數(shù)值并賦給小計(jì)
oSinglePrice.innerHTML = this.getSinglePrice(oGoodsNum.innerHTML, oPrice.innerHTML);
//3.獲取并更新商品總數(shù)量(調(diào)用重新執(zhí)行>刷新數(shù)據(jù))
this.getGoodsNumAndUpdate();
//4.獲取并更新總貨物總價(jià)格(調(diào)用重新執(zhí)行>刷新數(shù)據(jù))
this.getGoodsPriceAndUpdate();
}
//減號(hào)按鈕方法
minGoods(btn) {
//獲取減號(hào)下一個(gè)兄弟元素(中間數(shù)值)
let oGoodsNum = btn.nextElementSibling;
//判斷如果商品數(shù)量大于零
if (oGoodsNum.innerHTML > 0) {
//1.點(diǎn)擊后數(shù)值減一
oGoodsNum.innerHTML = oGoodsNum.innerHTML - 1;
//獲取單價(jià)(btn父元素的下一個(gè)元素的子元素)
let oPrice = btn.parentNode.nextElementSibling.firstElementChild;
//獲取小計(jì)(btn父元素的下一個(gè)元素的下一個(gè)元素的子元素)
let oSinglePrice = btn.parentNode.nextElementSibling.nextElementSibling.firstElementChild;
//2.重新獲取小計(jì)數(shù)值并賦給小計(jì)
oSinglePrice.innerHTML = this.getSinglePrice(oGoodsNum.innerHTML, oPrice.innerHTML);
//3.獲取并更新商品總數(shù)量(調(diào)用重新執(zhí)行>刷新數(shù)據(jù))
this.getGoodsNumAndUpdate();
//4.獲取并更新總貨物總價(jià)格(調(diào)用重新執(zhí)行>刷新數(shù)據(jù))
this.getGoodsPriceAndUpdate();
}
}
//刪除按鈕方法
delGoods(btn) {
//獲取購(gòu)物車table元素
let god = document.getElementById("goods");
//獲取此按鈕父元素的父元素
let oTr = btn.parentNode.parentNode;
//然后刪除此元素(在此指按鈕選擇的整個(gè)tr元素)
oTr.remove();
//重新排序號(hào)(循環(huán)名為god的table元素下的所有子元素tr)(從第二個(gè)子元素開(kāi)始,并且去掉最后一個(gè)小計(jì)行)
for (let i = 1; i < god.firstElementChild.children.length - 1; i++) {
//將循環(huán)之后的元素?cái)?shù)值i賦值給名為god的table元素下的子元素tr下的第一個(gè)子元素td
god.firstElementChild.children[i].firstElementChild.innerHTML = i;
}
//3.獲取并更新商品總數(shù)量(調(diào)用重新執(zhí)行>刷新數(shù)據(jù))
this.getGoodsNumAndUpdate();
//4.獲取并更新總貨物總價(jià)格(調(diào)用重新執(zhí)行>刷新數(shù)據(jù))
this.getGoodsPriceAndUpdate();
}
//添加訂單方法
update() {
//獲取所有類名為update的元素
let btn = document.getElementsByClassName("update");
//獲取所有id名為update-table的元素
let updateTable = document.getElementById("update-table");
//獲取購(gòu)物車table元素
let god = document.getElementById("goods");
//獲取購(gòu)物車table元素的第一個(gè)子元素tbody的所有子元素tr
let gods = god.firstElementChild.children;
//目標(biāo)元素賦值為false
let flag = false;
//這個(gè)this是為了避免在事件體內(nèi)cart的對(duì)象被覆蓋
let that = this;
//循環(huán)所有類名為update的元素
for (let i = 0; i < btn.length; i++) {
//類名為update的點(diǎn)擊事件
btn[i].onclick = function() {
//循環(huán)購(gòu)物車table元素的第一個(gè)子元素tbody的所有子元素tr
for (let j = 0; j < gods.length - 1; j++) {
//循環(huán)判斷菜單中是否有這個(gè)菜,如果有這個(gè)菜則加1;
//本意為在購(gòu)物車尋找相同名稱的商品如果有則執(zhí)行購(gòu)物車的這條數(shù)據(jù)商品數(shù)量+1;如果沒(méi)有則使flag為true跳出判斷
//this是類名為update元素input標(biāo)簽
//購(gòu)物車table中所有子元素tr遍歷 下的第一個(gè)子元素的內(nèi)容==類名為update元素input的父元素td的上一個(gè)兄弟元素的上一個(gè)兄弟元素的內(nèi)容 時(shí)執(zhí)行
if (gods[j].children[1].innerHTML == this.parentNode.previousElementSibling.previousElementSibling.innerHTML) {
//購(gòu)物車table中所有子元素tr遍歷 下的第二個(gè)子元素的內(nèi)容(即為購(gòu)物車中商品的數(shù)量)+1
gods[j].children[2].children[1].innerHTML = " " + (Number(gods[j].children[2].children[1].innerHTML) + 1) + " ";
//購(gòu)物車table中所有子元素tr遍歷 下的第四個(gè)子元素的內(nèi)容(即為購(gòu)物車中小計(jì)的數(shù)值被賦值)
gods[j].children[4].innerHTML = '小計(jì):<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.獲取并更新總貨物總價(jià)格(調(diào)用重新執(zhí)行>刷新數(shù)據(jù))
that.getGoodsPriceAndUpdate();
//給flag賦值為false
flag = false;
//跳出本次循環(huán)
break;
} else {
//購(gòu)物車table中所有子元素tr遍歷 下的第一個(gè)子元素的內(nèi)容!=類名為update元素input的父元素td的上一個(gè)兄弟元素的上一個(gè)兄弟元素的內(nèi)容 時(shí)執(zhí)行
//賦值給flag為true
flag = true;
}
}
if (flag) {
//如果沒(méi)有這個(gè)菜則添加
//創(chuàng)建一個(gè)節(jié)點(diǎn)tr
let tr = document.createElement("tr");
//添加這個(gè)節(jié)點(diǎn)的內(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>單價(jià):<span class="goods-price">' +
this.parentNode.previousElementSibling.innerHTML +
'</span></td><td>小計(jì):<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.獲取并更新總貨物總價(jià)格(調(diào)用重新執(zhí)行>刷新數(shù)據(jù))
that.getGoodsPriceAndUpdate();
}
}
//重新排猜你喜歡里的商品序號(hào)
for (let i = 1; i < updateTable.firstElementChild.children.length; i++) {
//排好的數(shù)值賦值給新添加的商品序號(hào)值
updateTable.firstElementChild.children[i].firstElementChild.innerHTML = i;
}
}
}
//觸發(fā)事件按鈕
eventBind() {
//獲取所有標(biāo)簽名為botton的按鈕
let oBtns = document.getElementsByTagName("button");
//這個(gè)this是為了避免在事件體內(nèi)cart的對(duì)象被覆蓋
let that = this;
//循環(huán)所有botton按鈕
for (let i = 0; i < oBtns.length; i++) {
if (i % 2) {//為奇數(shù)時(shí)觸發(fā)addGoods()方法
oBtns[i].onclick = function() {
that.addGoods(this);
}
} else {//為偶數(shù)時(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元素的點(diǎn)擊事件
oDelBtns[i].onclick = function() {
//調(diào)用delGoods()方法執(zhí)行刪除效果
that.delGoods(this);
}
}
//調(diào)用添加訂單
this.update();
}
}
let c = new Cart();
</script>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
基于BootStrap Metronic開(kāi)發(fā)框架經(jīng)驗(yàn)小結(jié)【一】框架總覽及菜單模塊的處理
這篇文章主要介紹了基于BootStrap Metronic開(kāi)發(fā)框架經(jīng)驗(yàn)小結(jié)【一】框架總覽及菜單模塊的處理的相關(guān)資料，小編認(rèn)為非常具有參考借鑒價(jià)值，感興趣的朋友一起學(xué)習(xí)吧2016-05-05
下面小編就為大家?guī)?lái)一篇js匿名函數(shù)使用&傳參(實(shí)例)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
JS+CSS實(shí)現(xiàn)的藍(lán)色table選項(xiàng)卡效果
這篇文章主要介紹了JS+CSS實(shí)現(xiàn)的藍(lán)色table選項(xiàng)卡效果,通過(guò)鼠標(biāo)事件調(diào)用自定義函數(shù)實(shí)現(xiàn)頁(yè)面元素樣式的遍歷與動(dòng)態(tài)切換效果,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10
這篇文章主要介紹了JS 獲取鼠標(biāo)左右鍵的鍵值方法，很簡(jiǎn)單，但很實(shí)用，特別是在做與用戶交互相關(guān)的東西2014-10-10
javascript中的nextSibling使用陷(da)阱(keng)
關(guān)于HTML/XML節(jié)點(diǎn)的問(wèn)題，在IE中nextSibling不會(huì)返回文本節(jié)點(diǎn)，而chrome或者firefox等會(huì)返回文本節(jié)點(diǎn)2014-05-05
javascript 事件綁定的一些兼容寫法整理非常不錯(cuò)，感謝2009-12-12
webpack?打包后圖片加載報(bào)錯(cuò)的解決辦法
使用webpack打包后,圖片沒(méi)有加載出來(lái),頁(yè)面空白,報(bào)錯(cuò)圖片引用的路徑不對(duì),本文給大家介紹webpack?打包后圖片加載報(bào)錯(cuò)的解決辦法,感興趣的朋友一起看看吧2024-03-03
用js來(lái)格式化字符串示例模仿css...2007-04-04
js如何獲取file控件的完整路徑具體實(shí)現(xiàn)代碼
需要隱藏input file然后獲取它的值，但連jquery都無(wú)法獲取它的值，下面與大家分享下使用js的具體獲取方法，感興趣的朋友可以參考下哈2013-05-05
網(wǎng)頁(yè)屏蔽(左右鍵,代碼等)的非JS方法...2007-03-03