<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin: 0;padding: 0;}
#ul{list-style:none;height:27px;float:left;}
#ul li{27px;height:27px;background:url('images/star.gif') no-repeat;float:left;}
#div{100px;height:27px;line-height:27px;float:left;color:green;margin-left: 10px;}
</style>
</head>
<body>
<ul id="ul">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div id="div"></div>
<script>
// 给个li 对象
var lis = document.getElementsByTagName('li');
var ulObj=document.getElementById('ul');
var divObj=document.getElementById('div');
var bj = false; // 表示没有评分
for(var i=0;i<lis.length;i++){
// 给每个 li 自定义一个 索引
lis[i].index = i;
// 给每个 li 绑定移入事件
lis[i].onmouseover = function(){
if(!bj){
for(var i=0;i<lis.length;i++){
if(i<=this.index){
// 改变星星 背景图片的位置 让星星变亮
lis[i].style.backgroundPosition = '0 -29px';
}
}
}
}
// 给每个 li 绑定点击事件
// 用户点击 就表示 确定评分了
lis[i].onclick = function(){
if(!bj){
bj = true;
// 把评分结果 写到 容器中
divObj.innerHTML = this.index+1+' 星';
}
}
}
// 鼠标移出 让星星 变灰色
ulObj.onmouseout = function(){
if(!bj){
for(var i=0;i<lis.length;i++){
lis[i].style.backgroundPosition = '0 0';
}
}
}
</script>
</body>
</html>