写点东西,献给初学者(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> <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