1 頁(yè)面布局
購(gòu)物車由一個(gè)table標(biāo)簽和一個(gè)div標(biāo)簽構(gòu)成。案例在Chrome瀏覽器運(yùn)行效果，如圖所示。
table標(biāo)簽共有5行6列，第1行是表頭，第2-5行的每一行都代表一個(gè)商品，依次用td標(biāo)簽存放商品的勾選框、商品縮略圖及名稱、商品單價(jià)、商品增減操作按鈕以及小計(jì)、刪除按鈕等。div標(biāo)簽存放已選商品數(shù)量、合計(jì)金額和提交訂單按鈕。以只有1個(gè)商品為例，HTML示例代碼如下所示。CSS代碼詳見(jiàn)本書(shū)源碼。
1 <table id="cartTable">
2 <tr>
3 <th><label><input class="check-all check" type="checkbox">全選</label></th>
4 <th>商品</th>
5 <th>單價(jià)</th>
6 <th>數(shù)量</th>
7 <th>小計(jì)</th>
8 <th>操作</th>
9 </tr>
10 <tr class="on">
11 <td class="checkbox"><input class="check-one check" type="checkbox"></td>
12 <td class="goods"><img src="images/1.jpg"><span>數(shù)據(jù)結(jié)構(gòu)-清華大學(xué)出版社</span></td>
13 <td class="price">28</td>
14 <td class="count">
15 <span class="reduce"></span>
16 <input class="count-input" type="text" value="1">
17 <span class="add">+</span>
18 </td>
19 <td class="subtotal">28</td>
20 <td class="operation"><span class="delete">刪除</span></td>
21 </tr>
22 </table>
23 <div class="foot" id="foot">
24 <div class="fr closing">提交訂單</div>
25 <div class="fr total">合計(jì)：￥<span id="priceTotal">0</span></div>
26 <div class="fr selected" id="selected"> 已選商品<span id="selectedTotal">0</span>件</div>
27 </div>
上述代碼中，第1-22行代碼定義了表格標(biāo)簽；第2-9行定義了表頭，第1行的第1個(gè)單元格是全選框；第10-21行代碼定義了第2行，共有5個(gè)單元格，依次存放商品的勾選框、商品縮略圖及名稱、商品單價(jià)、商品增減操作按鈕以及小計(jì)、刪除按鈕等；第23-27行代碼定義了div標(biāo)簽，依次存放已選商品數(shù)量、合計(jì)金額和提交訂單按鈕。?
2 工具函數(shù)
（1）用戶單擊任一行內(nèi)的商品增減操作按鈕，同一行的小計(jì)金額都會(huì)根據(jù)數(shù)量的變化而變化，因此應(yīng)封裝函數(shù)實(shí)現(xiàn)金額小計(jì)功能。示例代碼如下。
function getSubtotal(tr) {
var cells = tr.cells;
var price = cells[2];
var countInput = tr.getElementsByTagName('input')[1];
var subtotal = (parseInt(countInput.value) * parseFloat(price.innerHTML)).toFixed(2);
cells[4].innerHTML = subtotal;
var span = tr.getElementsByTagName('span')[1];
if (countInput.value == 1) {
span.innerHTML = '';
}else{
span.innerHTML = '-';
}
}
上述代碼中定義了函數(shù)getSubtotal(tr)，它根據(jù)單價(jià)和數(shù)量計(jì)算金額小計(jì)，并顯示在頁(yè)面相應(yīng)的單元格中。如果數(shù)量不為1，則將顯示商品減少操作符“-”。形式參數(shù)tr代表進(jìn)行小計(jì)的行對(duì)象。
（2）用戶選中某個(gè)商品或全選商品時(shí)，已選商品數(shù)量和合計(jì)都會(huì)根據(jù)選中商品的變化而變化，因此應(yīng)封裝函數(shù)實(shí)現(xiàn)合計(jì)功能。示例代碼如下。
function getTotal() {
var seleted = 0;
var price = 0;
for (var i = 0, len = tr.length; i < len; i++) {
if (tr[i].getElementsByTagName('input')[0].checked) {
seleted += parseInt(tr[i].getElementsByTagName('input')[1].value);
price += parseFloat(tr[i].cells[4].innerHTML);
}
}
selectedTotal.innerHTML = seleted;
priceTotal.innerHTML = price.toFixed(2);
}
上述代碼定義了函數(shù)getTotal()，它遍歷累加每行商品的數(shù)量和金額小計(jì)，計(jì)算出已選商品數(shù)量和合計(jì)金額，并顯示在頁(yè)面相應(yīng)的位置。
3 勾選商品
用戶單擊某行的勾選框時(shí)，如果勾選框狀態(tài)是未選中，則取消全選，然后調(diào)用
getTotal()函數(shù)計(jì)算并顯示已選商品數(shù)量和合計(jì)金額；用戶單擊全選框時(shí)，所有行內(nèi)勾選框狀態(tài)和全選框狀態(tài)保持一致，然后調(diào)用getTotal()函數(shù)計(jì)算并顯示已選商品數(shù)量和合計(jì)金額。
示例代碼如下。
1 for(var i = 0; i < checkInputs.length; i++ ){
2 checkInputs[i].onclick = function () {
3 if (this.className.indexOf('check-all') >= 0) {
4 for (var j = 0; j < checkInputs.length; j++) {
5 checkInputs[j].checked = this.checked;
6 }
7 }
8 if (!this.checked) {
9 checkAllInput.checked = false;
10 }
11 getTotal();
12 }
13 }
上述代碼中，第1-2行代碼循環(huán)遍歷所有的checkbox，為每一個(gè)checkbox綁定單擊事件及其處理程序；第3-7行代碼設(shè)置所有行內(nèi)勾選框狀態(tài)和全選框狀態(tài)保持一致；第8-10行代碼判斷如果當(dāng)前勾選框狀態(tài)未選中，則取消全選；第11行代碼調(diào)用getTotal()函數(shù)計(jì)算并顯示已選商品數(shù)量和合計(jì)金額。
4 增減和刪除商品
表格的每一行內(nèi)有減少商品、增加商品和刪除按鈕等，可以通過(guò)事件委托，為它們的父元素tr對(duì)象綁定單擊事件及其處理程序。單擊某行內(nèi)的商品增減操作按鈕，同一行的小計(jì)金額都會(huì)根據(jù)數(shù)量的變化而變化；單擊刪除按鈕將當(dāng)前行刪除。示例代碼如下。
1 for (var i = 0; i < tr.length; i++) {
2 tr[i].onclick = function (e) {
3 var el = e.target
4 var cls = el.className;
5 var countInput = this.getElementsByTagName('input')[1];
6 var value = parseInt(countInput.value);
7 switch (cls) {
8 case 'add':
9 countInput.value = value + 1;
10 getSubtotal(this);
11 break;
12 case 'reduce':
13 if (value > 1) {
14 countInput.value = value - 1;
15 getSubtotal(this);
16 }
17 break;
18 case 'delete':
19 var conf = confirm('確定刪除此商品嗎？');
20 if (conf) {
21 this.parentNode.removeChild(this);
22 }
23 break;
24 }
25 getTotal();
26 }
27 }
上述代碼中，第1-2行代碼循環(huán)遍歷所有的tr，為每一個(gè)tr綁定單擊事件及其處理程序；第3-6行代碼通過(guò)事件對(duì)象的target屬性獲取事件源，并獲取事件源的class屬性和當(dāng)前行的已購(gòu)商品數(shù)量；第7-24行代碼通過(guò)switch語(yǔ)句判斷，如果事件源是增加商品按鈕，則將已購(gòu)商品數(shù)量加1，并調(diào)用getSubtotal(this)進(jìn)行小計(jì)；如果事件源是減少商品按鈕，并且已購(gòu)商品數(shù)量大于1，則將已購(gòu)商品數(shù)量減1，并調(diào)用getSubtotal(this)進(jìn)行小計(jì)；如果事件源是刪除商品按鈕，則詢問(wèn)用戶是否將當(dāng)前行從購(gòu)物車刪除；第25行代碼調(diào)用getTotal()函數(shù)計(jì)算并顯示已選商品數(shù)量和合計(jì)金額。
視頻講解：HTML+CSS+JavaScript實(shí)現(xiàn)網(wǎng)絡(luò)購(gòu)物車網(wǎng)頁(yè)特效_嗶哩嗶哩_bilibili文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-450463.html
源碼：清華大學(xué)出版社-圖書(shū)詳情-《JavaScript前端開(kāi)發(fā)與實(shí)例教程（微課視頻版）》文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-450463.html
到了這里，關(guān)于HTML+CSS+JavaScript實(shí)現(xiàn)網(wǎng)絡(luò)購(gòu)物車的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
