<!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>