事件处理之——商品评级
实现商品评级功能，从0到5级。其中blank.gif为一张透明图片，实现0分评级；star1.gif为一张星星图片；star0.gif为一张半透明星星图片：
1 <html>
2 <head>
3 <title>Vote Page</title>
4 <style type="text/css">
5 * {
6 font-family:Tahoma,Arial,serif;
7 font-size:12pt;
8 text-align:left;
9 }
10 body {
11 margin:30px;
12 }
13 #vote {
14 top:50px;
15 left:50px;
16 width:200px;
17 }
18 #imag1,#imag2,#imag3,#imag4,#imag5 {
19 cursor:pointer;
20 }
21 </style>
22 <script type="text/javascript">
23 // IE
24 if(window.ActiveXObject) {
25 // 预读图片，防止IE中的图片切换时反复下载图片
26 var preload0 = new Image();
27 preload0.src = "star0.gif";
28
29 var preload1 = new Image();
30 preload1.src = "star1.gif";
31 }
32 // 默认评分为3分
33 var score = 3;
34 // 设置评分状态
35 function setScore(score) {
36 for(var i=1; i<=5; i++) {
37 // <img>元素
38 var img = $("img" + String(i));
39
40 // 根据评分值设置显示的图片
41 img.src = (i <= score) ? "star1.gif" : "star0.gif";
42 }
43 }
44 // 保存评分结果
45 function commitScore(s) {
46 score = s;
47 }
48 // 恢复到最后一次评分结果的状态
49 function resetScore() {
50 setScore(score);
51 }
52 function $(id) {
53 return document.getElementById(id);
54 }
55 </script>
56 </head>
57 <body>
58 <div id="vote">
59 星级：
60 <img src="blank.gif" id="img0" onmousemover="setScore(0)"
61 onclick="commitScore(0)" onmouseout="resetScore()" alt="1" />
62 <img src="star1.gif" id="img1" onmousemover="setScore(1)"
63 onclick="commitScore(1)" onmouseout="resetScore()" alt="1" />
64 <img src="star1.gif" id="img2" onmousemover="setScore(2)"
65 onclick="commitScore(2)" onmouseout="resetScore()" alt="2" />
66 <img src="star1.gif" id="img3" onmousemover="setScore(3)"
67 onclick="commitScore(3)" onmouseout="resetScore()" alt="3" />
68 <img src="star0.gif" id="img4" onmousemover="setScore(4)"
69 onclick="commitScore(4)" onmouseout="resetScore()" alt="4" />
70 <img src="star0.gif" id="img5" onmousemover="setScore(5)"
71 onclick="commitScore(5)" onmouseout="resetScore()" alt="5" />
72 </div>
73 <div>
74 <textarea rows="5" cols="25"></textarea>
75 </div>
76 <div>
77 <button>提交</button>
78 </div>
79 </body>
80 </html>
2 <head>
3 <title>Vote Page</title>
4 <style type="text/css">
5 * {
6 font-family:Tahoma,Arial,serif;
7 font-size:12pt;
8 text-align:left;
9 }
10 body {
11 margin:30px;
12 }
13 #vote {
14 top:50px;
15 left:50px;
16 width:200px;
17 }
18 #imag1,#imag2,#imag3,#imag4,#imag5 {
19 cursor:pointer;
20 }
21 </style>
22 <script type="text/javascript">
23 // IE
24 if(window.ActiveXObject) {
25 // 预读图片，防止IE中的图片切换时反复下载图片
26 var preload0 = new Image();
27 preload0.src = "star0.gif";
28
29 var preload1 = new Image();
30 preload1.src = "star1.gif";
31 }
32 // 默认评分为3分
33 var score = 3;
34 // 设置评分状态
35 function setScore(score) {
36 for(var i=1; i<=5; i++) {
37 // <img>元素
38 var img = $("img" + String(i));
39
40 // 根据评分值设置显示的图片
41 img.src = (i <= score) ? "star1.gif" : "star0.gif";
42 }
43 }
44 // 保存评分结果
45 function commitScore(s) {
46 score = s;
47 }
48 // 恢复到最后一次评分结果的状态
49 function resetScore() {
50 setScore(score);
51 }
52 function $(id) {
53 return document.getElementById(id);
54 }
55 </script>
56 </head>
57 <body>
58 <div id="vote">
59 星级：
60 <img src="blank.gif" id="img0" onmousemover="setScore(0)"
61 onclick="commitScore(0)" onmouseout="resetScore()" alt="1" />
62 <img src="star1.gif" id="img1" onmousemover="setScore(1)"
63 onclick="commitScore(1)" onmouseout="resetScore()" alt="1" />
64 <img src="star1.gif" id="img2" onmousemover="setScore(2)"
65 onclick="commitScore(2)" onmouseout="resetScore()" alt="2" />
66 <img src="star1.gif" id="img3" onmousemover="setScore(3)"
67 onclick="commitScore(3)" onmouseout="resetScore()" alt="3" />
68 <img src="star0.gif" id="img4" onmousemover="setScore(4)"
69 onclick="commitScore(4)" onmouseout="resetScore()" alt="4" />
70 <img src="star0.gif" id="img5" onmousemover="setScore(5)"
71 onclick="commitScore(5)" onmouseout="resetScore()" alt="5" />
72 </div>
73 <div>
74 <textarea rows="5" cols="25"></textarea>
75 </div>
76 <div>
77 <button>提交</button>
78 </div>
79 </body>
80 </html>
