用JavaScript实现某电商网站的商品评分功能

2015-12-02于万国

河北民族师范学院学报 2015年2期

关键词：鼠标河北星星

于万国

（河北民族师范学院数学与计算机系，河北承德067000）

用JavaScript实现某电商网站的商品评分功能

于万国

（河北民族师范学院数学与计算机系，河北承德067000）

介绍在电商网站中如何使用JavaScript来实现商品评分功能。该功能实现了当鼠标经过时灰色的星星变亮，并显示相应的评论；当鼠标离开时，星星恢复为初始的灰色，相应的评论内容也不显示；当鼠标点击某个星星时，此星星之前的星星全变亮，并显示其对应的评论内容，鼠标移开后也无变化的效果。

电商网站；商品评分；JavaScript

图1　商品评分

1　背景分析

现在是电子商务时代，人们在互联网上购物的行为越来越多，由于网购的商品在购买前无法当面验货，所以大多数人在购买前会查看其它买家的使用评价，如图1所示。商品的评价功能的实现方法很多，笔者介绍一种用现在比较流行的脚本语言JavaScript来实现商品评分功能的方法。实现的最终效果如图2所示。

图2　商品评分的最终效果

图3　初始状态

2　功能分析

在实现中单独抽离出了星级评分和相关评价生成的功能，详细从以下几个角度进行分析：

1）创建html结构，添加相关文字、图片和控件；2）必要的地方使用CSS做简单修饰或定位；3）实现当鼠标经过时灰色的星星变亮，并显示相应的评论（五颗星对应着五种评论内容）；

4）当鼠标离开时，星星恢复为初始的灰色，相应的评论内容也不显示（如图3所示）；

5）当鼠标点击某个星星时，此星星之前的星星全变亮，并显示其对应的评论内容，鼠标移开后也无变化（图2所示）。

3　设计实现

3.1目录结构的建立及素材的准备

新建一个demo文件夹，双击打开该文件夹，用记事本或其它文本编辑工具新建一个mark.html文件，用于创建网页结构。新建三个文件夹，分别命名为css、js、images，分别用于存放样式文件style.css,行为文件star.js和本例用到的三个图片文件bg.jpg、star3.gif、star4.gif。其中bg.jpg是样式文件style.css用到的网页背景图片，star3.gif是灰色的星图片，star4.gif是橙色的星图片，需要事先准备好。目录结构如图4所示。

图4　目录结构

3.2网页结构文件mark. html的建立

用＜link＞标签引入样式表文件style.css，用＜script＞标签引入star.js文件，在页面中包括显示5个星星的div以及用于显示相关评价的多行文本域。注意在img标签里加入了一个name属性，在写JS代码的时候要用到[1]。网页结构代码如下：

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

该样式文件代码比较简单，请读者自行分析即可理解。代码如下：

3.4编写外部JavaScript文件star.js

这是整个功能实现的核心部分。

1）首先将评论文字存储在一个数组里；

var content=[“差”，“合格”，“中”，“良”，“优”];

2）当鼠标经过时，相应的星星变亮，因此定义星星的鼠标经过mousrover事件。为此使用getElementByTagName()方法获得每个星星，然后用for循环将其之前的星星的.src属性替换成“images/star4. gif”，即每当鼠标滑过一个星星，之前相应的星星由star3.gif，变为star4.gif，达到的效果就是星星变亮；使用getElementById()方法获得显示评论的对象多行文本域，然后将其value值替换为当前鼠标所指向的星星对应的评论内容[2]；

3）编辑当鼠标离开时的函数，定义星星的鼠标离开mousrout事件，在这个里首先判断变量clicked的值是否为ture，clicked在之前被赋值为false，如果clicked的值是ture，则返回；如果是false则执行for循环，将所有星星的.src属性替换为“images/star3. gif”,并将文本域的value属性赋值为空[3]；

4）标点击某个星星时，此星星之前的星星全变亮，并显示其对应的评论内容，定义鼠标的单击事件，当单击时将变量clicked设置为true。

5）这里基本的功能就已经实现了，再附上window.onload事件，即可实现。整个代码如下所示：