由于本周的任务是实现文档评论功能，以前同事采用一个combox来通过下拉从0自增1到100来给定分数，不过感觉不是太美观，所以网上搜了一下找到这个星级评分的实现：
Minimal, yet complete. How a star rating system should be.
Our percentage based Star Rating function gives you 1,680% increase in accuracy — compared with the traditional 5 star system, it has 84 hotspots (84 pixels), instead of 5 hot spots (5 stars). Let’s do the math: (84/5)*100 = 1,680%… why restrict your users?
Download the
.zip source code.
JAVASCRIPT
function $(v,o) { return((typeof(o)=='object'?o:document).getElementById(v)); }
function $S(o) { return((typeof(o)=='object'?o:$(o)).style); }
function agent(v) { return(Math.max(navigator.userAgent.toLowerCase().indexOf(v),0)); }
function abPos(o) { var o=(typeof(o)=='object'?o:$(o)), z={X:0,Y:0}; while(o!=null) { z.X+=o.offsetLeft; z.Y+=o.offsetTop; o=o.offsetParent; }; return(z); }
function XY(e,v) { var o=agent('msie')?{'X':event.clientX+document.body.scrollLeft,'Y':event.clientY+document.body.scrollTop}:{'X':e.pageX,'Y':e.pageY}; return(v?o[v]:o); }
star={};
star.mouse=function(e,o) { if(star.stop || isNaN(star.stop)) { star.stop=0;
document.οnmοusemοve=function(e) { var n=star.num;
var p=abPos($('star'+n)), x=XY(e), oX=x.X-p.X, oY=x.Y-p.Y; star.num=o.id.substr(4);
if(oX<1 || oX>84 || oY<0 || oY>19) { star.stop=1; star.revert(); }
else {
$S('starCur'+n).width=oX+'px';
$S('starUser'+n).color='#111';
$('starUser'+n).innerHTML=Math.round(oX/84*100)+'%';
}
};
} };
star.update=function(e,o) { var n=star.num, v=parseInt($('starUser'+n).innerHTML);
n=o.id.substr(4); $('starCur'+n).title=v;
req=new XMLHttpRequest(); req.open('GET','/AJAX_Star_Vote.php?vote='+(v/100),false); req.send(null);
};
star.revert=function() { var n=star.num, v=parseInt($('starCur'+n).title);
$S('starCur'+n).width=Math.round(v*84/100)+'px';
$('starUser'+n).innerHTML=(v>0?Math.round(v)+'%':'');
$('starUser'+n).style.color='#888';
document.οnmοusemοve='';
};
star.num=0;
CSS
#star ul.star { LIST-STYLE: none; MARGIN: 0; PADDING: 0; WIDTH: 85px; HEIGHT: 20px; LEFT: 10px; TOP: -5px; POSITION: relative; FLOAT: left; BACKGROUND: url('media/stars.gif') repeat-x; CURSOR: pointer; }
#star li { PADDING: 0; MARGIN: 0; FLOAT: left; DISPLAY: block; WIDTH: 85px; HEIGHT: 20px; TEXT-DECORATION: none; text-indent: -9000px; Z-INDEX: 20; POSITION: absolute; PADDING: 0; }
#star li.curr { BACKGROUND: url('media/stars.gif') left 25px; FONT-SIZE: 1px; }
#star div.user { LEFT: 15px; POSITION: relative; FLOAT: left; FONT-SIZE: 13px; FONT-FAMILY: Arial; COLOR: #888; }HTML
<div id="star">
<ul id="star0" class="star" οnmοusedοwn="star.update(event,this)" οnmοusemοve="star.mouse(event,this)" title="Rate This!">
<li id="starCur0" class="curr" title="98" style="width: 82px;"></li>
</ul>
<div style="color: rgb(136, 136, 136);" mce_style="color: #888888;" id="starUser0" class="user">98%</div>
<br style="clear: both;" mce_style="clear: both;">
<ul id="star1" class="star" οnmοusedοwn="star.update(event,this)" οnmοusemοve="star.mouse(event,this)" title="Rate This!">
<li id="starCur1" class="curr" title="50" style="width: 42px;"></li>
</ul>
<div style="color: rgb(136, 136, 136);" mce_style="color: #888888;" id="starUser1" class="user">50%</div>
<br style="clear: both;" mce_style="clear: both;">
<ul id="star2" class="star" οnmοusedοwn="star.update(event,this)" οnmοusemοve="star.mouse(event,this)" title="Rate This!">
<li id="starCur2" class="curr" title="99" style="width: 83px;"></li>
</ul>
<div style="color: rgb(136, 136, 136);" mce_style="color: #888888;" id="starUser2" class="user">99%</div>
<br style="clear: both;" mce_style="clear: both;">
<ul id="star3" class="star" οnmοusedοwn="star.update(event,this)" οnmοusemοve="star.mouse(event,this)" title="Rate This!">
<li id="starCur3" class="curr" title="70" style="width: 59px;"></li>
</ul>
<div style="color: rgb(136, 136, 136);" mce_style="color: #888888;" id="starUser3" class="user">70%</div>
<br style="clear: both;" mce_style="clear: both;">
<ul id="star4" class="star" οnmοusedοwn="star.update(event,this)" οnmοusemοve="star.mouse(event,this)" title="Rate This!">
<li id="starCur4" class="curr" title="30" style="width: 25px;"></li>
</ul>
<div style="color: rgb(136, 136, 136);" mce_style="color: #888888;" id="starUser4" class="user">30%</div>
</div>
