1 <!DOCTYPE html>
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title></title>
6 <script>
7 //存储被点击的图片的index.
8 var imgIndexClicked;
9 var imgs;
10 //设置图片的方法.参数i:从0到i为黄色,之后为空.
11 function setImgByIndex(i) {
12 for (var emp = 0; emp <= i; emp++) {
13 imgs[emp].src = "img/starYellow.png";
14 }
15 for (var emp = Number(i) + 1; emp < imgs.length; emp++) {
16 imgs[emp].src = "img/starEmpty.png";
17 }
18 }
19
20 //鼠标移动上去,根据此图片的Index,设置5个图片的src.
21 function setMouseover(i) {
22 return function () {
23 setImgByIndex(i);
24 };
25 }
26
27 //点击某张图片时存储该图片的index.
28 function setClick(i) {
29 return function () {
30 imgIndexClicked = i;
31 //alert("从0开始计数...第 "+i+" 个被点了.");
32 };
33 }
34
35 //鼠标离开这个图片,根据保存的被点击的图片号imgIndexClicked,设置5个图片的src.
36 function setMouseleave() {
37 setImgByIndex(imgIndexClicked);
38 }
39
40 onload = function () {
41 imgs = document.getElementsByTagName("img");
42 for (var i in imgs) {
43 imgs[i].onmouseover = setMouseover(i);
44 imgs[i].onclick = setClick(i);
45 imgs[i].onmouseleave = setMouseleave;//给的是方法,不是方法的调用.故setMouseleave();是错误的.
46 }
47 };
48 </script>
49 </head>
50 <body>
51 <img src="img/starYellow.png" />
52 <img src="img/starYellow.png" />
53 <img src="img/starYellow.png" />
54 <img src="img/starYellow.png" />
55 <img src="img/starYellow.png" />
56 </body>
57 </html>
时间： 2024-08-10 12:15:32