js实现星星评分效果:如图,当鼠标移至某个星星的时候出现相应的评分数,星星的颜色也会变!
1、在做这个之前,先准备好一张图片grading.png如下图,放到images文件夹下,路径为:images/grading.png
2、做一个html文件名为dome.html
里面就包含了两个文件,如下图
demo.html的html代码
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
1 <div id="QuacorGrading"> 2 <strong>评分</strong> 3 <input name="1" type="button" /> 4 <input name="2" type="button" /> 5 <input name="3" type="button" /> 6 <input name="4" type="button" /> 7 <input name="5" type="button" /> 8 <input name="6" type="button" /> 9 <input name="7" type="button" /> 10 <input name="8" type="button" /> 11 <input name="9" type="button" /> 12 <input name="10" type="button" /> 13 <span id="QuacorGradingValue"><b><font size="5" color="#fd7d28">6.5</font></b>分</span> 14 </div>
domo.html的css代码
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
1 <style type="text/css"> 2 *{margin:0;padding:0;list-style-type:none;} 3 a,img{border:0;} 4 img{vertical-align:middle;} 5 #QuacorGrading input{background:url(images/grading.png) no-repeat scroll right center;cursor:pointer;height:30px;width:30px;padding:0;border:0;} 6 </style>
domo.html的js代码
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
1 <script type="text/javascript"> 2 var GradList = document.getElementById("QuacorGrading").getElementsByTagName("input"); 3 4 for(var di=0;di<parseInt(document.getElementById("QuacorGradingValue").getElementsByTagName("font")[0].innerHTML);di++){ 5 GradList[di].style.backgroundPosition = 'left center'; 6 } 7 8 9 for(var i=0;i < GradList.length;i++){ 10 GradList[i].onmouseover = function(){ 11 for(var Qi=0;Qi<GradList.length;Qi++){ 12 GradList[Qi].style.backgroundPosition = 'right center'; 13 } 14 for(var Qii=0;Qii<this.name;Qii++){ 15 GradList[Qii].style.backgroundPosition = 'left center'; 16 } 17 document.getElementById("QuacorGradingValue").innerHTML = '<b><font size="5" color="#fd7d28">'+this.name+'</font></b>分'; 18 } 19 } 20 </script>