<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>五角星评分控件</title>
<style type="text/css">
ul
{
list-style: none;
}
ul li
{
float: left;
font-size: 40px;
font-family: 黑体;
color: #ccc;
cursor: pointer;
}
.score
{
color: gold;
}
</style>
<script type="text/javascript">
function $id(id){
return document.getElementById(id);
}
function $tag(tag, objDom){
if (objDom) {
return objDom.getElementsByTagName(tag);
}
else{
return objDom.getElementsByTagName(tag);
}
}
var star_s = '★';
var star_k = '☆';
window.onload = function(){
var lis = $tag('li',$id('score_control'));
for (var i = 0; i < lis.length; i++) {
//1.给每个li标签，动态添加一个属性index，用来记录它自己的索引值
lis[i].setAttribute('index',i);
//2.给每个li标签注册onmouseover事件
lis[i].onmouseover = function(){
//this.innerHTML = star_s;
//this.className = 'score';
//3.拿到当前li的索引值
var index = Number(this.getAttribute('index'));
//4.循环遍历lis，把从0-index个li的innHTML和class进行设置
//for (var j= 0; j <= index; j++) {
//lis[j].innerHTML = star_s;
//lis[j].className = 'score';
//}
//for (var k = index + 1; k < lis.length; k++) {
//console.log(k);
//lis[k].innerHTML = star_k;
//lis[k].className = '';
//}
for (var j = 0; j < lis.length; j++) {
if (j <= index) {
lis[j].innerHTML = star_s;
lis[j].className = 'score';
} else {
lis[j].innerHTML = star_k;
lis[j].className = '';
}
}
}
//6.给li注册onclick事件，打分
//6.1声明一个全局变量，用来保存用户点击时，星星的序号
var current = -1;
lis[i].onclick = function(){
//6.2获取点击的星星序号
current = Number(this.getAttribute('index'));
}
}
//5.给UL注册onmouseout事件
$id('score_control').onmouseout = function(){
for (var i = 0 ; i < lis.length; i++) {
if (i <= current) {
lis[i].innerHTML = star_s;
lis[i].className = 'score';
} else {
lis[i].innerHTML = star_k;
lis[i].className = '';
}
}
}
}
</script>
</head>
<body>
<ul id="score_control">
<li>☆</li>
<li>☆</li>
<li>☆</li>
<li>☆</li>
<li>☆</li>
</ul>
</body>
</html>