你的位置:首页 > Java教程

[Java教程]JavaScript星形评分


 1 <!DOCTYPE html> 2 <html ="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>