网站文章评分用“星星”
技术与开发
站长蜜雪经常在cnBeta上看新闻，看完新闻后时常用网站上的星级评分系统给文章打分，这个功能蜜雪MM非常喜欢，即漂亮又实用。她想把这个功能移植到自己的网站上，可不知道该如何实现。
不少网站的新闻都有评分系统，但很多网站用的都是数字评分系统，看上去相当枯燥，大家可以使用我们制作的星级评分插件（插件下载地址：http://www.shudoo.com/bzsoft）来美化评分系统。
要设计这个插件，先要利用Div新建一个评分系统的容器，然后根据评分等级生成相应的等级标记并利用星形图案作为其背景，从而得到星星效果，再根据预设的评分等级将星星效果改为显示评分等级结果的星星特效，最后，将提交分数与星星特效关联起来即可。如果我们选用的不是星星，而是表情，就可以制作表情打分插件。
小知识：如何利用JavaScript动态创建HTML对象
我们在编写程序的时候，经常会有动态创建HTML对象的需求，怎么实现动态创建HTML对象呢？一般有两种方法，createElement和innerHTML。使用createElement创建的HTML对象在网页无刷新的情况下是无法释放的，就是说，它会一直占用客户端的部分资源；而使用innerHTML创建的HTML对象是可以替换删除的。
第一步 准备星星图案并预设评分等级
新建一个网页，在网页的〈body〉〈/body〉之间添加一个Div，并为Div添加一个ID，代码如下所示：
〈div id="star"〉〈/div〉
接着准备一张有三种星星图案效果的图片（见图），然后在〈body〉〈/body〉之间输入相关JavaScript代码，其中关键代码如下所示（完整代码下载地址：http://www.shudoo.com/bzsoft）：
function star_ini（v，sn，level）{//初始化星级评分插件，其中v为插件容器，sn为评分等级，level为评分等级的初始值
//设置星级评分插件的宽度及高度值
v.style.innerHTML='';
v.style.width=（（sn+1）*25）+'px';
v.style.height='35px';
//将星级分为正分星级与负分星级
var sn1=-（parseInt（sn/2））;
第二步 设计星星等级特效并关联评分分数
添加完评分星星后，我们便要为每个星星添加等级并配上相应等级的显示特效，再关联用户提交的评分分数。紧接第一步的代码输入相关JavaScript代码，其中关键代码如下所示（完整代码下载地址：http://www.shudoo.com/bzsoft）：
function star_mover（v，d）{//将鼠标移动到星星上产生的效果
var vs=v.parentNode.getElementsByTagName（'li'）;//获取所有的星星对象
var vsL=vs.length-1;//获取星星的数量
var vid=parseInt（vsL/2）+d;//获取当前星星在集合中的索引值
if（d>0）{//如果用户打分为正，则将相应的正分星星变为选择状态
while（d>0）{
vs[vid——].style.background='url（vert_star.gif） no-repeat -25px 0px';
d——;
function star_click（d）{//点击星星的效果
alert（'您的评分是'+d+'分！'）;
star_ini（document.getElementById（'star'），10，d）;
}
function star_mover（v，d）{//将鼠标移动到星星上产生的效果
var vs=v.parentNode.getElementsByTagName（'li'）;//获取所有的星星对象
var vsL=vs.length-1;//获取星星的数量
var vid=parseInt（vsL/2）+d;//获取当前星星在集合中的索引值
if（d>0）{//如果用户打分为正，则将相应的正分星星变为选择状态
while（d>0）{
vs[vid——].style.background='url（vert_star.gif） no-repeat -25px 0px';
d——;
}
}else{//如果用户打分为负，则将相应的负分星星变为选择状态
while（d<=0）{
vs[vid++].style.background='url（vert_star.gif） no-repeat -25px 0px';
d++;
第三步 在网页中显示星级评分系统
最后，我们还要在网页中把星级评分系统显示出来。在第一步的容器标记下面输入如下JavaScript代码即可：
〈script language="javascript"〉
star_ini（document.getElementById（'star'），10，3）;//星级评分插件显示
〈/script〉
编后
本文的星级评分插件可以给大家很多启示，如果星星图案换成大拇指图案，就可以变成大拇指评分插件，如果使用的是动态心情图片，视觉效果更好，更方便让读者表达自己看完新闻后的心情。