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

于萬國

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

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

于萬國

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

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

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

圖1　商品評分

1　背景分析

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

圖2　商品評分的最終效果

圖3　初始狀態(tài)

2　功能分析

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

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

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

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

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

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

新建一個demo文件夾，雙擊打開該文件夾，用記事本或其它文本編輯工具新建一個mark.html文件，用于創(chuàng)建網(wǎng)頁結(jié)構(gòu)。新建三個文件夾，分別命名為css、js、images，分別用于存放樣式文件style.css,行為文件star.js和本例用到的三個圖片文件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個星星的div以及用于顯示相關(guān)評價的多行文本域。注意在img標(biāo)簽里加入了一個name屬性，在寫JS代碼的時候要用到[1]。網(wǎng)頁結(jié)構(gòu)代碼如下：

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

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

3.4編寫外部JavaScript文件star.js

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

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

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

2）當(dāng)鼠標(biāo)經(jīng)過時，相應(yīng)的星星變亮，因此定義星星的鼠標(biāo)經(jīng)過mousrover事件。為此使用getElementByTagName()方法獲得每個星星，然后用for循環(huán)將其之前的星星的.src屬性替換成“images/star4. gif”，即每當(dāng)鼠標(biāo)滑過一個星星，之前相應(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ù)，定義星星的鼠標(biāo)離開mousrout事件，在這個里首先判斷變量clicked的值是否為ture，clicked在之前被賦值為false，如果clicked的值是ture，則返回；如果是false則執(zhí)行for循環(huán)，將所有星星的.src屬性替換為“images/star3. gif”,并將文本域的value屬性賦值為空[3]；

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

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

4　總結(jié)

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

[1]孫良軍等.H TM L+CSS+JavaScript網(wǎng)頁設(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ī)系講師，理學(xué)碩士，研究方向為多媒體技術(shù)和網(wǎng)絡(luò)應(yīng)用。

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