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 id="div"> 59 <span id="0">☆</span><span id="1">☆</span><span id="2">☆</span><span id="3">☆</span><span id="4">☆</span> 60 </div> 61 </body>
我是新手，优化还不够，欢迎指正