1 <script type="text/javascript">
2 //★
3 var spans=document.getElementsByTagName("span");
4 var flag=5;//这个值随便取,只要不是01234就行
5 var Expand=function(){
6 //扩展代码,暂无
7 };
8
9 onload=function(){
10 //循环载入鼠标移入事件
11 for(var i=0;i<spans.length;i++){
12 spans[i].onmouseover=function(){
13 var id=parseInt(this.id);
14 for(var i=0;i<=id;i++){
15 spans[i].innerHTML="★";
16 }
17 for(var j=id+1;j<5;j++){
18 spans[j].innerHTML="☆";
19 }
20 };
21 }
22 //循环载入鼠标点击星星事件
23 for(var i=0;i<spans.length;i++){
24 spans[i].onclick=function(){
25 var id=parseInt(this.id);
26 flag=id;
27 for(var i=0;i<=id;i++){
28 spans[i].innerHTML="★";
29 }
30 Expand();//这里是鼠标点击星星的扩展,例如出现分值之类的,总之要扩展什么随你的大小便啦~
31 };
32 }
33 //载入鼠标离开div事件
34 document.getElementById("div").onmouseout=function(){
35 //如果tag是3,则循环给把0 1 2 3几个星星整黄
36 if(flag>=0 && flag<=4){
37 for(var i=0;i<=flag;i++){
38 spans[i].innerHTML="★";
39
40 }
41 for(var j=flag+1;j<5;j++){
42 spans[j].innerHTML="☆";
43 }
44 }
45 //如果tag没有值或者是初值5,则把所有的星星还原成空星星
46 else{
47 for(var i=0;i<spans.length;i++)
48 {
49 spans[i].innerHTML="☆";
50 }
51 }
52 };
53 };
54
55 </script>
56 </head>
57 <body>
58 <div >
59 <span >☆</span><span >☆</span><span >☆</span><span >☆</span><span >☆</span>
60 </div>
61 </body>
我是新手,优化还不够,欢迎指正