js简单的五角星评分

最新推荐文章于 2022-08-18 11:08:27 发布

yanggasgas

最新推荐文章于 2022-08-18 11:08:27 发布

阅读量2.4k

点赞数

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
window.onload=function(){
//首先要获取图片,相当于装到一个数组里面
var star = document.getElementsByTagName("img");
//读取数组的索引
for(var i =0;i<star.length;i++){
star[i].setAttribute("index",i+1);
star[i].onclick=function(){
//读取元素的属性值

var result = event.srcElement.getAttribute("index");
document.getElementById("score").innerHTML= result;
var newindex = result-1;
for(var j =0;j<=newindex;j++){
star[j].setAttribute("src","images/1star.gif");
}
for(var j =newindex+1;j<star.length;j++){
star[j].setAttribute("src","images/2star.gif");
}
}
}
}
</script>
</head>
<body>
<img src="images/2star.gif"/>
<img src="images/2star.gif"/>
<img src="images/2star.gif"/>
<img src="images/2star.gif"/>
<img src="images/2star.gif"/>
<span id="score" style="color: red">0</span>分
</body>
</html>