<!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> five-pointed star ratings Controls </ title>
<style type="text/css">
the
{
list-style: none;
}
ul li
{
float: left;
font-size: 40px;
font-family: bold;
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);
}
}
was star_s = '★';
was star_k = '☆';
window.onload = function(){
var lis = $tag('li',$id('score_control'));
for (var i = 0; i < lis.length; i++) {
// 1. Li for each tag, add a dynamic attribute index, used to record the value of its own index
lis[i].setAttribute('index',i);
// 2. Li tag for each registered event onmouseover
lis[i].onmouseover = function(){
//this.innerHTML = star_s;
//this.className = 'score';
// 3. Get current index value of li
var index = Number(this.getAttribute('index'));
// 4. Loop through lis, from the set of 0-index th li class and innHTML
//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 registered to onclick event, scoring
When //6.1 declare a global variable, used to store the user clicks, the number of stars
var current = -1;
lis[i].onclick = function(){
//6.2 get clicked number of stars
current = Number(this.getAttribute('index'));
}
}
// 5. To UL registered onmouseout event
$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>