JavaScript 手写星级评分组件实现

星级评分效果实现概述

本文分享一个简易的星级评分交互效果实现。由于作者水平有限，文中如有不足之处，欢迎指正。

素材准备与样式定义

实现该效果首先需要准备一张包含星星图标的图片。图片中需包含两种状态：灰色代表默认未选中状态，黄色代表选中状态。具体样式可参考相关图示。

 
<!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>

附上下载地址

：这是本人闲着无聊，通过自己所学的 javascript 知识，随意写的一些效果。