javascript 星级评分效果(手写)

171 阅读 0 评论 113 点赞

我是靠谱客的博主魁梧铃铛，最近开发中收集的这篇文章主要介绍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> 