写点东西，献给菜鸟（JS控制动态评分效果的实现）

2012-02-03

写点东西，献给初学者（JS控制动态评分效果的实现）好久没来这里发点原创的东西了，今天发一贴比较实用的：很多

写点东西，献给初学者（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_ ' + i + ipt).src = 'images/ ' + STAR_IMG[0] ;

}
}
oo(hint).innerHTML = shwStarHint(num); //右侧显示hint信息
}

//鼠标点击，改变星星
function choStar(ipt, num, hint) {
if(num <= 5) {
for(var i=0;i <num;i++) {
oo( 'star_ ' + i + ipt).src = 'images/ ' + STAR_IMG[2] ;
}
for(i;i <5;i++) {
oo( 'star_ ' + i + ipt).src = 'images/ ' + STAR_IMG[0] ;
}
}
oo(ipt).value = num;
oo(hint).innerHTML = shwStarHint(num); //右侧显示hint信息
}

//清除星星
function clearStar(ipt, hint)
{
var num = oo(ipt).value ;
if(num == " ") num = 0;
if(num <= 5) {
for(var i=0;i <num;i++) {
oo( 'star_ ' + i + ipt).src = 'images/ ' + STAR_IMG[2] ;
}
for(i;i <5;i++) {
oo( 'star_ ' + i + ipt).src = 'images/ ' + STAR_IMG[0] ;
}
}
if (num == 0) oo(hint).innerHTML = " ";
else oo(hint).innerHTML = shwStarHint(num);
}

//用于显示hint
function shwStarHint(num) {
num = num <= 0 ? 0 : num - 1;
return STAR_HINT[num];
}
//-->
</SCRIPT>

-------------------------------

2、定义HTML调用

<INPUT id=id_point type=hidden name=point>
<script language= "javascript " type= "text/javascript ">

</SCRIPT>
<SPAN onmouseout= "clearStar( 'id_point ', 'shw_app ') ">

<IMG id=star_0id_point onmouseover= "chgStar( 'id_point ', 1, 'shw_app ') " style= "CURSOR: hand " onclick= "choStar( 'id_point ', 1, 'shw_app ') " src= "images/star_b.gif " align=absMiddle border=0>

<IMG id=star_1id_point onmouseover= "chgStar( 'id_point ', 2, 'shw_app ') " style= "CURSOR: hand " onclick= "choStar( 'id_point ', 2, 'shw_app ') " src= "images/star_b.gif " align=absMiddle border=0>
<IMG id=star_2id_point onmouseover= "chgStar( 'id_point ', 3, 'shw_app ') " style= "CURSOR: hand " onclick= "choStar( 'id_point ', 3, 'shw_app ') " src= "images/star_b.gif " align=absMiddle border=0>
<IMG id=star_3id_point onmouseover= "chgStar( 'id_point ', 4, 'shw_app ') " style= "CURSOR: hand " onclick= "choStar( 'id_point ', 4, 'shw_app ') " src= "images/star_b.gif " align=absMiddle border=0>
<IMG id=star_4id_point onmouseover= "chgStar( 'id_point ', 5, 'shw_app ') " style= "CURSOR: hand " onclick= "choStar( 'id_point ', 5, 'shw_app ') " src= "images/star_b.gif " align=absMiddle border=0>

</SPAN>

  <SPAN id=shw_app> </SPAN>

+++++++++++++++++++++++++++++++++++++++
More tech entries,Please visit my blog:

> > > > > > http://bolm.cn < < < < < < <
+++++++++++++++++++++++++++++++++++++++

[解决办法]
但是最少我看了!!!

热点排行

CSS

写点东西，献给菜鸟（JS控制动态评分效果的实现）