<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
window.οnlοad=function(){
//获取图片元素存到arrs数组中
var arrs=document.getElementsByTagName("img");
for(var i=0;i<arrs.length;i++){
arrs[i].setAttribute("index",i+1);
arrs[i].οnclick=function(){
var score=event.srcElement.getAttribute("index");
//得到点击后的分数
document.getElementById("score").innerHTML=score;
var nn=score-1;
for(var j=0;j<=nn;j++){
arrs[j].setAttribute("src","img/1star.gif");
//将点击的前面的星改为点亮状态
}
for(var k=nn+1;k<arrs.length;k++){
arrs[k].setAttribute("src","img/2star.gif");
//点击后面的星为熄灭状态
}
}
}
}
</script>
</head>
<body>
<img src="img/2star.gif"/>
<img src="img/2star.gif"/>
<img src="img/2star.gif"/>
<img src="img/2star.gif"/>
<img src="img/2star.gif"/>
<span id="score">0</span>分
</body>
</html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
window.οnlοad=function(){
//获取图片元素存到arrs数组中
var arrs=document.getElementsByTagName("img");
for(var i=0;i<arrs.length;i++){
arrs[i].setAttribute("index",i+1);
arrs[i].οnclick=function(){
var score=event.srcElement.getAttribute("index");
//得到点击后的分数
document.getElementById("score").innerHTML=score;
var nn=score-1;
for(var j=0;j<=nn;j++){
arrs[j].setAttribute("src","img/1star.gif");
//将点击的前面的星改为点亮状态
}
for(var k=nn+1;k<arrs.length;k++){
arrs[k].setAttribute("src","img/2star.gif");
//点击后面的星为熄灭状态
}
}
}
}
</script>
</head>
<body>
<img src="img/2star.gif"/>
<img src="img/2star.gif"/>
<img src="img/2star.gif"/>
<img src="img/2star.gif"/>
<img src="img/2star.gif"/>
<span id="score">0</span>分
</body>
</html>