效果图如下：
代码如下：
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Document</title> | |
| <style type="text/css"> | |
| .box{ | |
| width: 360px; | |
| height: 50px; | |
| margin: 20px auto; | |
| border: 1px pink solid; | |
| } | |
| .box p{ | |
| font-size: 20px; | |
| display: inline-block; | |
| color: #999; | |
| float: left; | |
| font-weight: bold; | |
| } | |
| .box p span{ | |
| color: red; | |
| margin-right: 5px; | |
| } | |
| #rating{ | |
| font-size: 0; | |
| } | |
| #rating a{ | |
| margin: 0 2px; | |
| } | |
| #comment{ | |
| color: gray; | |
| margin-left: 7px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="box"> | |
| <p><span>*</span>总体评价: | |
| <span id="rating"> | |
| <a href="javascript:;"><img src="img/img/nst.gif" alt=""></a> | |
| <a href="javascript:;"><img src="img/img/nst.gif" alt=""></a> | |
| <a href="javascript:;"><img src="img/img/nst.gif" alt=""></a> | |
| <a href="javascript:;"><img src="img/img/nst.gif" alt=""></a> | |
| <a href="javascript:;"><img src="img/img/nst.gif" alt=""></a> | |
| </span> | |
| <span id="comment"> </span> | |
| </p> | |
| </div> | |
| <script type="text/javascript"> | |
| var oRating=document.getElementById('rating'); | |
| var aA=oRating.getElementsByTagName('a'); | |
| var comment=document.getElementById('comment'); | |
| var arrImg=['img/img/nst.gif','img/img/nsg.gif','img/img/sth.gif','img/img/st.gif']; | |
| lastArrImg=[]; | |
| lastComment=' '; | |
| num=0; | |
| function rating(index,imgSrc){ | |
| for(var i=0;i<=index;i++){ | |
| aA[i].getElementsByTagName('img')[0].src=imgSrc; | |
| } | |
| switch(index){ | |
| case 0: | |
| comment.innerHTML='极差'; | |
| break; | |
| case 1: | |
| comment.innerHTML='很差'; | |
| break; | |
| case 2: | |
| comment.innerHTML='还行'; | |
| break; | |
| case 3: | |
| comment.innerHTML='不错'; | |
| break; | |
| case 4: | |
| comment.innerHTML='推荐'; | |
| break; | |
| } | |
| } | |
| for(var i=0;i<aA.length;i++){ | |
| aA[i].index=i; | |
| aA[i].onmouseover=function(){ | |
| num=this.index; | |
| for(var i=0;i<aA.length;i++){ | |
| lastArrImg[i]=aA[i].getElementsByTagName('img')[0].src; | |
| } | |
| rating(aA.length-1,arrImg[0]); | |
| if(num<2){ | |
| rating(num,arrImg[1]); | |
| }else{ | |
| rating(num,arrImg[2]); | |
| } | |
| } | |
| aA[i].onmouseout=function(){ | |
| for(var i=0;i<aA.length;i++){ | |
| aA[i].getElementsByTagName('img')[0].src=lastArrImg[i]; | |
| } | |
| comment.innerHTML=lastComment; | |
| } | |
| aA[i].onclick=function(){ | |
| num=this.index; | |
| rating(aA.length-1,arrImg[0]); | |
| if(num<2){ | |
| rating(num,arrImg[1]); | |
| }else{ | |
| rating(num,arrImg[3]); | |
| } | |
| for(var i=0;i<aA.length;i++){ | |
| lastArrImg[i]=aA[i].getElementsByTagName("img")[0].src; | |
| } | |
| lastComment=comment.innerHTML; | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> |