于萬國

（河北民族師范學(xué)院數(shù)學(xué)與計(jì)算機(jī)系，河北承德067000）

用JavaScript實(shí)現(xiàn)某電商網(wǎng)站的商品評分功能

于萬國

（河北民族師范學(xué)院數(shù)學(xué)與計(jì)算機(jī)系，河北承德067000）

介紹在電商網(wǎng)站中如何使用JavaScript來實(shí)現(xiàn)商品評分功能。該功能實(shí)現(xiàn)了當(dāng)鼠標(biāo)經(jīng)過時(shí)灰色的星星變亮，并顯示相應(yīng)的評論；當(dāng)鼠標(biāo)離開時(shí)，星星恢復(fù)為初始的灰色，相應(yīng)的評論內(nèi)容也不顯示；當(dāng)鼠標(biāo)點(diǎn)擊某個(gè)星星時(shí)，此星星之前的星星全變亮，并顯示其對應(yīng)的評論內(nèi)容，鼠標(biāo)移開后也無變化的效果。

電商網(wǎng)站；商品評分；JavaScript

圖1　商品評分

1　背景分析

現(xiàn)在是電子商務(wù)時(shí)代，人們在互聯(lián)網(wǎng)上購物的行為越來越多，由于網(wǎng)購的商品在購買前無法當(dāng)面驗(yàn)貨，所以大多數(shù)人在購買前會查看其它買家的使用評價(jià)，如圖1所示。商品的評價(jià)功能的實(shí)現(xiàn)方法很多，筆者介紹一種用現(xiàn)在比較流行的腳本語言JavaScript來實(shí)現(xiàn)商品評分功能的方法。實(shí)現(xiàn)的最終效果如圖2所示。

圖2　商品評分的最終效果

圖3　初始狀態(tài)

2　功能分析

在實(shí)現(xiàn)中單獨(dú)抽離出了星級評分和相關(guān)評價(jià)生成的功能，詳細(xì)從以下幾個(gè)角度進(jìn)行分析：

1）創(chuàng)建html結(jié)構(gòu)，添加相關(guān)文字、圖片和控件；2）必要的地方使用CSS做簡單修飾或定位；3）實(shí)現(xiàn)當(dāng)鼠標(biāo)經(jīng)過時(shí)灰色的星星變亮，并顯示相應(yīng)的評論（五顆星對應(yīng)著五種評論內(nèi)容）；

4）當(dāng)鼠標(biāo)離開時(shí)，星星恢復(fù)為初始的灰色，相應(yīng)的評論內(nèi)容也不顯示（如圖3所示）；

5）當(dāng)鼠標(biāo)點(diǎn)擊某個(gè)星星時(shí)，此星星之前的星星全變亮，并顯示其對應(yīng)的評論內(nèi)容，鼠標(biāo)移開后也無變化（圖2所示）。

3　設(shè)計(jì)實(shí)現(xiàn)

3.1目錄結(jié)構(gòu)的建立及素材的準(zhǔn)備

新建一個(gè)demo文件夾，雙擊打開該文件夾，用記事本或其它文本編輯工具新建一個(gè)mark.html文件，用于創(chuàng)建網(wǎng)頁結(jié)構(gòu)。新建三個(gè)文件夾，分別命名為css、js、images，分別用于存放樣式文件style.css,行為文件star.js和本例用到的三個(gè)圖片文件bg.jpg、star3.gif、star4.gif。其中bg.jpg是樣式文件style.css用到的網(wǎng)頁背景圖片，star3.gif是灰色的星圖片，star4.gif是橙色的星圖片，需要事先準(zhǔn)備好。目錄結(jié)構(gòu)如圖4所示。

圖4　目錄結(jié)構(gòu)

3.2網(wǎng)頁結(jié)構(gòu)文件mark. html的建立

用＜link＞標(biāo)簽引入樣式表文件style.css，用＜script＞標(biāo)簽引入star.js文件，在頁面中包括顯示5個(gè)星星的div以及用于顯示相關(guān)評價(jià)的多行文本域。注意在img標(biāo)簽里加入了一個(gè)name屬性，在寫JS代碼的時(shí)候要用到[1]。網(wǎng)頁結(jié)構(gòu)代碼如下：

3.3樣式文件style.css文件的建立

該樣式文件代碼比較簡單，請讀者自行分析即可理解。代碼如下：

3.4編寫外部JavaScript文件star.js

這是整個(gè)功能實(shí)現(xiàn)的核心部分。

1）首先將評論文字存儲在一個(gè)數(shù)組里；

var content=[“差”，“合格”，“中”，“良”，“優(yōu)”];

2）當(dāng)鼠標(biāo)經(jīng)過時(shí)，相應(yīng)的星星變亮，因此定義星星的鼠標(biāo)經(jīng)過mousrover事件。為此使用getElementByTagName()方法獲得每個(gè)星星，然后用for循環(huán)將其之前的星星的.src屬性替換成“images/star4. gif”，即每當(dāng)鼠標(biāo)滑過一個(gè)星星，之前相應(yīng)的星星由star3.gif，變?yōu)閟tar4.gif，達(dá)到的效果就是星星變亮；使用getElementById()方法獲得顯示評論的對象多行文本域，然后將其value值替換為當(dāng)前鼠標(biāo)所指向的星星對應(yīng)的評論內(nèi)容[2]；

3）編輯當(dāng)鼠標(biāo)離開時(shí)的函數(shù)，定義星星的鼠標(biāo)離開mousrout事件，在這個(gè)里首先判斷變量clicked的值是否為ture，clicked在之前被賦值為false，如果clicked的值是ture，則返回；如果是false則執(zhí)行for循環(huán)，將所有星星的.src屬性替換為“images/star3. gif”,并將文本域的value屬性賦值為空[3]；

4）標(biāo)點(diǎn)擊某個(gè)星星時(shí)，此星星之前的星星全變亮，并顯示其對應(yīng)的評論內(nèi)容，定義鼠標(biāo)的單擊事件，當(dāng)單擊時(shí)將變量clicked設(shè)置為true。

5）這里基本的功能就已經(jīng)實(shí)現(xiàn)了，再附上window.onload事件，即可實(shí)現(xiàn)。整個(gè)代碼如下所示：

4　總結(jié)

在該實(shí)現(xiàn)方法中用到了JavaScript中的BOM和DOM模型的使用，JavaScript中數(shù)組的使用以及鼠標(biāo)的三個(gè)常用事件等等。利用好這些知識點(diǎn)，可以實(shí)現(xiàn)WEB頁上更加復(fù)雜的商品評分效果。

[1]孫良軍等.H TM L+CSS+JavaScript網(wǎng)頁設(shè)計(jì)與布局實(shí)用教程[M].北京：清華大學(xué)出版社,2011：223-226.

[2]明日科技.JavaScript從入門到精通[M].北京：清華大學(xué)出版社,2012.172-185.

[3]Timothy Boronczyk等.W eb開發(fā)入門經(jīng)典[M].北京：清華大學(xué)出版社,2009：332-396.

TP3

A

2095-3763（2015）02-0092-03

2014-08-18

于萬國（1976-），男，蒙古族，河北承德人，河北民族師范學(xué)院數(shù)學(xué)與計(jì)算機(jī)系講師，理學(xué)碩士，研究方向?yàn)槎嗝襟w技術(shù)和網(wǎng)絡(luò)應(yīng)用。

河北民族師范學(xué)院項(xiàng)目《承德市旅游局12301咨詢投訴管理系統(tǒng)的設(shè)計(jì)研究》（201309）。