js实现星星评分效果
2015-11-10 10:18
661 查看
js实现星星评分效果:如图,当鼠标移至某个星星的时候出现相应的评分数,星星的颜色也会变!
View Code
<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
相关文章推荐
- 多个js中如何避免方法名重复
- JS截取与分割字符串常用技巧总结
- js轮播图
- GeoJSON介绍
- 在 JavaScript 中实现私有成员的语法特性
- 纯javascript响应式树形菜单效果
- vc 与 js应用
- JavaScript中SetInterval与setTimeout的用法详解
- sharepoint 中waiting screen dialog的使用方法(JSOM)
- js闭包
- WGS-84,GCJ-02,BD-09的js转换
- js判断是否是IE的简单方法
- DOM0, DOM1, DOM2, DOM3
- JS-全局和局部变量
- JS-动态和匿名函数
- 5.JavaScript优化及导航菜单背后的秘密
- 九九乘法表(javascript)
- JSTL标签提示:"items" does not support runtime expressions
- Newtonsoft.Json(Json.Net)学习笔记
- JavaScript中的函数表达式及递归