五星评价代码,不多说了,直接上代码,第一次上传心情忐忑啊 …
<!doctype html> <html> <head> <meta charset="utf-8"> <title>五星评价</title> <style> *{margin:0;padding:0;} a{display: inline-block;padding:20px;font-size: 30px;cursor: pointer;} .colorComment{color:red;} </style> <script> window.onload=function(){ function commentFiv(id,tab) { var oComment=document.getElementById(id); var aA=oComment.getElementsByTagName(tab); var num=0; for(var i=0;i<aA.length; i++){ aA[i].innerHTML="☆"; aA[i].index=i; //浮到星星上时变颜色 aA[i].onmouseover=function(){ for(var j=0; j<aA.length; j++){ if(j<this.index+1){ aA[j].className="colorComment"; aA[j].innerHTML="★"; } else{ aA[j].className=""; aA[j].innerHTML="☆"; } } }; //浮出星星上时回到初始状态 aA[i].onmouseout=function(){ for(var j=0; j<aA.length; j++) { if(num){ if(j<num){ aA[j].className="colorComment"; aA[j].innerHTML="★"; } else{ aA[j].className=""; aA[j].innerHTML="☆"; } }else{ aA[j].className=""; aA[j].innerHTML="☆"; } } }; //点击确定 aA[i].onclick=function () { for(var j=0; j<aA.length; j++){ if(j<this.index+1){ aA[j].className="colorComment"; aA[j].innerHTML="★"; } else{ aA[j].className=""; aA[j].innerHTML="☆" } } num = this.index+1 } } } commentFiv("box","a") }; </script> </head> <body> <div id="box"> <a></a><a></a><a></a><a></a><a></a> </div> </body> </html>