1 <!DOCTYPE HTML>
2 <html lang="en-US">
3 <head>
4 <meta charset="UTF-8">
5 <title>javascript星级评分</title>
6
7 <style type="text/css">
8
9 *{margin:0;padding:0;}
10
11 .wrapper{height:20px;padding:5px;width:130px;margin:100px auto 10px;}
12
13 a{float:left;width:26px;height:20px;background:url(star.png) 0 -20px no-repeat;}
14
15 p{font:24px SimSun;width:130px;margin-left:auto;margin-right:auto;}
16
17 </style>
18 </head>
19 <body>
20 <div class="wrapper">
21
22 <a href="javascript:;"></a>
23 <a href="javascript:;"></a>
24 <a href="javascript:;"></a>
25 <a href="javascript:;"></a>
26 <a href="javascript:;"></a>
27
28 </div>
29
30 <p></p>
31 </body>
32 </html>
33
34 <script type="text/javascript">
35
36 window.onload = function(){
37
38 var star = document.getElementsByTagName('a');
39
40 var oDiv = document.getElementsByTagName('div')[0];
41
42 var temp = 0;
43
44
45
46 for(var i = 0, len = star.length; i < len; i++){
47
48 star[i].index = i;
49
50
51 star[i].onmouseover = function(){
52 clear();
53
54 for(var j = 0; j < this.index + 1; j++){
55
56 star[j].style.backgroundPosition = '0 0';
57
58 }
59
60 }
61
62 star[i].onmouseout = function(){
63 for(var j = 0; j < this.index + 1; j++){
64 star[j].style.backgroundPosition = '0 -20px';
65 }
66 current(temp);
67 }
68
69
70 star[i].onclick = function(){
71 temp = this.index + 1;
72
73 document.getElementsByTagName('p')[0].innerHTML = temp + ' 颗星';
74 current(temp);
75
76 }
77
78 }
79 //清除所有
80 function clear(){
81 for(var i = 0, len = star.length; i < len; i++){
82 star[i].style.backgroundPosition = '0 -20px';
83 }
84 }
85 //显示当前第几颗星
86 function current(temp){
87 for(var i = 0; i < temp; i++){
88 star[i].style.backgroundPosition = '0 0';
89 }
90 }
91
92 };
93
94 </script>
