<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<img src="img/0.png" />
<img src="img/0.png" />
<img src="img/0.png" />
<img src="img/0.png" />
<img src="img/0.png" />
<div id="div1"></div>
</body>
</html>
<script>
var imgs= document.getElementsByTagName("img");
var l=imgs.length;
for(let i=0;i<l;i++){
let img=imgs[i];
img.i=i;
img.onmouseout=function(){
var n=img.i;
for(var j=0;j<=n;j++){
imgs[j].src="img/1.png"
}
}
img.onmouseover=function(){
for(var i=0;i<5;i++){
imgs[i].src="img/0.png"
}
var n=img.i;
for(var j=0;j<=n;j++){
imgs[j].src="img/1.png"
}
document.onmousedown=function(){
div1.innerHTML=j+"星";
}
}
}
</script>