五角星评分
在现实生活中，我们会经常见到需要打分的地方，五个小星星，鼠标放在上面就会变样式，并且鼠标点击一下就会记录到，这是怎么实现的呢？
其实用javascript就可以实现。今天我们来写一下。
首先先给出样式：
如图所示，在生活中我也就是经常见这样的评分样式。
实现代码如下所示：
<!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>
</head>
<body>
<ul id="score_control">
<li>☆</li>
<li>☆</li>
<li>☆</li>
<li>☆</li>
<li>☆</li>
</ul>
</body>
</html>
JavaScript实现模块如下所示：
window.onload = function(){
var stars = document.getElementById('score_control').getElementsByTagName('li');
var scoreIndex = -1;
for (var i = 0; i < stars.length; i++) {
//1.拿到当前星星的索引值:
//如何查找这是第几颗星？
//0.在循环注册事件的同时，把当前循环变量的值，记录到当前星星身上。
stars[i].setAttribute('index',i);
stars[i].onmouseover = function(){
//1.拿到当前星星的索引值
var index = this.getAttribute('index');
for (var i = 0; i < stars.length; i++) {
if(stars[i].getAttribute('index') <= index){
stars[i].innerHTML = '★';
stars[i].className = 'score';
}
else{
stars[i].innerHTML = '☆';
stars[i].className = '';
}
}
}
stars[i].onmouseout = function(){
for (var i = 0; i < stars.length; i++) {
if(stars[i].getAttribute('index') <= scoreIndex){
stars[i].innerHTML = '★';
stars[i].className = 'score';
}
else{
stars[i].innerHTML = '☆';
stars[i].className = '';
}
}
}
stars[i].onclick = function(){
scoreIndex = this.getAttribute('index');
}
}
}
