您的位置:首页 > Web前端 > JavaScript

js实现星星评分效果

2015-11-10 10:18 661 查看
js实现星星评分效果:如图,当鼠标移至某个星星的时候出现相应的评分数,星星的颜色也会变!

<script type="text/javascript">
var GradList = document.getElementById("QuacorGrading").getElementsByTagName("input");

for(var di=0;di<parseInt(document.getElementById("QuacorGradingValue").getElementsByTagName("font")[0].innerHTML);di++){
GradList[di].style.backgroundPosition = 'left center';
}

for(var i=0;i < GradList.length;i++){
GradList[i].onmouseover = function(){
for(var Qi=0;Qi<GradList.length;Qi++){
GradList[Qi].style.backgroundPosition = 'right center';
}
for(var Qii=0;Qii<this.name;Qii++){
GradList[Qii].style.backgroundPosition = 'left center';
}
document.getElementById("QuacorGradingValue").innerHTML = '<b><font size="5" color="#fd7d28">'+this.name+'</font></b>分';
}
}
</script>


View Code
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: