JavaScript星形评分

最新推荐文章于 2024-09-11 17:09:49 发布

weixin_30383279

最新推荐文章于 2024-09-11 17:09:49 发布

阅读量48

点赞数

文章标签： javascript xhtml ViewUI

原文链接：http://www.cnblogs.com/ICE_Inspire/p/4539413.html

版权

 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>

转载于:https://www.cnblogs.com/ICE_Inspire/p/4539413.html

weixin_30383279

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript星形评分

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&...
复制链接

扫一扫