日期:2014-05-17  浏览次数:20742 次

写点东西,献给初学者(JS控制动态评分效果的实现)
好久没来这里发点原创的东西了,今天发一贴比较实用的:

很多web2.0的网站都有点评,在点评中一般都有一种评分的功能,具体怎么称呼不是最清楚,样式如下图,各位应该都玩过,现在来分析一下它的做法:

1、定义JS函数

<script   language= "javascript "   type= "text/javascript ">  
<!--  
String.prototype.inc   =   function(k1,   k2){  
        return   k2   ==   null   ?   this.indexOf(k1)   >   -1   ?   true   :   false   :   (k2   +   this   +   k2)   .indexOf(k2   +   k1   +   k2)   >   -1   ?   true   :   false;  
};  
var   is_IE5   =   navigator.userAgent.inc( "IE   5 ")   ||   navigator.userAgent.inc( "IE   4 ");  
//定义星星:分别是blank(空白),over(鼠标移上去),selected(被选择)  
var   STAR_IMG   =   new   Array( "star_b.gif ",   "star_o.gif ",   "star_s.gif ");  
//定义旁边的标签文字  
var   STAR_HINT   =   new   Array( "很糟糕 ",   "需改进 ",   "一般般 ",   "还不错 ",   "很满意 ");  
//用于取得对象  
function   oo(obj)   {  
        return   typeof(obj)   !=   "string "   ?   obj   :   (is_IE5   ?   document.all(obj)   :   document.getElementById(obj));  
}  
   
//星星初始化  
function   initChgStar(ipt,   hint)   {  
        document.write( ' <span   onMouseOut= "clearStar(\ ' '   +   ipt   + '\ ',   \ ' '   +   hint   + '\ ') "> ');  
        for(var   i   =   0;   i   <   5;   i++)   {  
        document.write( ' <img   src= "images/ '   +   STAR_IMG[0]   +   ' "     border= "0 "   id= "star_ '   +   i   +   ipt+   ' "   onMouseOver= "chgStar(\ ' '   +   ipt   + '\ ',   '   +   (i+1)   +   ',   \ ' '   +   hint   + '\ ') "   align= "absmiddle "   style= "cursor:hand "   onClick= "choStar(\ ' '   +   ipt   + '\ ',   '   +   (i+1)   +   ',   \ ' '   +   hint   + '\ ') "/> ');  
        }  
   
        document.write( ' </span> &nbsp; <span   id= " '+hint   + ' "> </span> ');  
}  
   
//鼠标移动上去,改变星星  
function   chgStar(ipt,   num,   hint)   {  
        if(num   <=   5)   {  
        for(var   i=0;i <num;i++)   {  
        oo( 'star_ '   +   i   +   ipt).src   =   'images/ '   +   STAR_IMG[1]   ;  
        }  
        for(i;i <5;i++)   {  
        oo( 'star_ ' &n