各位小伙伴

娜娜又來(lái)了

今天我們來(lái)模仿

一個(gè)購(gòu)物車(chē)實(shí)現(xiàn)結(jié)算功能

購(gòu)物車(chē)

先來(lái)看一下成品的頁(yè)面效果，原諒我這只有貓的照片，要是放點(diǎn)貓糧，貓砂什么的~會(huì)不會(huì)有打廣告的嫌疑~

請(qǐng)點(diǎn)擊此處輸入圖片描述

就是這個(gè)樣子的，現(xiàn)在我們來(lái)動(dòng)手做一下。

先來(lái)寫(xiě)頁(yè)面的布局，這邊我們使用 ul 列表來(lái)做這個(gè)布局，一共是六個(gè) ul，其中我們需要寫(xiě)樣式的就只有三個(gè)（表頭，中間內(nèi)容，結(jié)尾），中間的四塊是一樣的樣式可以直接復(fù)制。

總體布局：

請(qǐng)點(diǎn)擊此處輸入圖片描述

請(qǐng)點(diǎn)擊此處輸入圖片描述

第一個(gè) li 是我們的商品圖片，接著是我們的單價(jià)，以及商品數(shù)量的選項(xiàng)里面包括 “+” “-” 以及顯示購(gòu)買(mǎi)商品的數(shù)量，最后一欄是我們的商品小計(jì)（單價(jià)*數(shù)量）。

下面給頁(yè)面設(shè)置樣式：

請(qǐng)點(diǎn)擊此處輸入圖片描述

這些樣式屬性都很常見(jiàn)，就不一一解釋了，伙伴們要是有不熟悉的可以百度一下，就知道這些標(biāo)簽的含義和用法了?(?>?<?)??

布局之后的頁(yè)面效果：

當(dāng)我們的鼠標(biāo)滑動(dòng)到按鍵的上面時(shí)，會(huì)改變按鍵的背景顏色~

請(qǐng)點(diǎn)擊此處輸入圖片描述

下面來(lái)寫(xiě)功能部分的代碼，首先獲取 加 和 減 的按鈕，然后獲取商品列表的長(zhǎng)度用 length 裝起來(lái)，aSpan 獲取的是商品的個(gè)數(shù) 定義一個(gè) number 數(shù)組來(lái)存儲(chǔ)商品的數(shù)量。

請(qǐng)點(diǎn)擊此處輸入圖片描述

然后再來(lái)實(shí)現(xiàn)添加和減少的操作

請(qǐng)點(diǎn)擊此處輸入圖片描述

在開(kāi)始是給數(shù)組 number 賦值，使里面所有的數(shù)據(jù)為零，給 add 添加一個(gè) index 屬性，用來(lái)獲取索引值，當(dāng)我們點(diǎn)擊 add【i】 按鈕時(shí)，對(duì)應(yīng)這個(gè) add 按鈕的 number【i】里面的數(shù)值 +1，實(shí)現(xiàn)產(chǎn)品數(shù)量的增加，reduce也是同理，不過(guò)要先進(jìn)行一步判斷，如果商品的數(shù)量已經(jīng)為 0 了 ，就時(shí)商品數(shù)量為 0 ，不會(huì)減少成負(fù)數(shù)。

到這一步我們就實(shí)現(xiàn)了，加和減的按鍵的功能，現(xiàn)在我們來(lái)實(shí)現(xiàn)修改頁(yè)面上數(shù)據(jù)的部分，就是框住的這部分的內(nèi)容哦~

請(qǐng)點(diǎn)擊此處輸入圖片描述

首先我們要獲取產(chǎn)品的單價(jià)，小計(jì)，商品總數(shù)，總價(jià)的位置。

請(qǐng)點(diǎn)擊此處輸入圖片描述

然后我們把數(shù)據(jù)輸出到頁(yè)面的相應(yīng)的位置上，注意一下獲取到的單價(jià)是 string字符串類(lèi)型，要進(jìn)行格式的轉(zhuǎn)化轉(zhuǎn)化成 number ~~剩下的就是頁(yè)面的意思了~

請(qǐng)點(diǎn)擊此處輸入圖片描述

怎么樣是不是簡(jiǎn)單明了~

一起看一下效果：

請(qǐng)點(diǎn)擊此處輸入圖片描述

?今天就到這里了

小伙伴們

再見(jiàn)了