今天上午抽空随手写了个星级评分的效果，给大家分享下。由于水平有限，如有问题请指出。
首先要准备一张星星的图片，灰色是默认状态，黄色是选择状态。如图：
最后附上代码：
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>javascript星级评分</title> <style type="text/css"> *{margin:0;padding:0;} .wrapper{height:20px;padding:5px;width:130px;margin:100px auto 10px;} a{float:left;width:26px;height:20px;background:url(star.png) 0 -20px no-repeat;} p{font:24px SimSun;width:130px;margin-left:auto;margin-right:auto;} </style> </head> <body> <div class="wrapper"> <a href="javascript:;"></a> <a href="javascript:;"></a> <a href="javascript:;"></a> <a href="javascript:;"></a> <a href="javascript:;"></a> </div> <p></p> </body> </html> <script type="text/javascript"> window.onload = function(){ var star = document.getElementsByTagName('a'); var oDiv = document.getElementsByTagName('div')[0]; 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.getElementsByTagName('p')[0].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'; } } }; </script>
附上下载地址。