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