javascript星级评分效果示例代码

javascript星级评分演示效果：

1，html代码

<div id="starBox">
<em></em>
<em></em>
<em></em>
<em></em>
<em></em>
</div>
<p id="starNotice"></p>

2，javascript星级评分代码

window.onload = function(){
 var star = document.getElementsByTagName('em');
 var oDiv = document.getElementById('starBox');
 var temp = 0;
 
 for(var i = 0, len = star.length; i < len; i++){
  star[i].index = i;
  
  star[i].onmouseover = function(){
   clear();
   for(var j = 0; j < this.index + 1; j++){
    star[j].style.backgroundPosition = '0 0';
   }
  }
  star[i].onmouseout = function(){
   for(var j = 0; j < this.index + 1; j++){
    star[j].style.backgroundPosition = '0 -20px';
   }
   current(temp);
  }
  star[i].onclick = function(){
   temp = this.index + 1;
   document.getElementById('starNotice').innerHTML = temp + ' 颗星';
   current(temp);
  }
 }
 //清除所有
 function clear(){
  for(var i = 0, len = star.length; i < len; i++){
   star[i].style.backgroundPosition = '0 -20px';
  }
 }
 //显示当前第几颗星
 function current(temp){
  for(var i = 0; i < temp; i++){
   star[i].style.backgroundPosition = '0 0';
  }
 }
};