天丫头
2014-04-25 22:08:36
原生js实现的星级评分效果
写个最简单的原生js的星级评分
Html代码
<div id="rank" class="pingfen"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> <p>加载中</p> </div>
Css代码
<style type="text/css"> *{margin: 0;padding: 0;} .pingfen{ width: 135px; margin:10px auto; height:20px; position: relative;} .pingfen ul{height:20px; margin-bottom: 10px;} .pingfen li{ width: 20px; float: left; height: 20px; cursor: pointer; background: url(star.png) no-repeat 0 0; list-style: none;} .pingfen .active{background: url(star.png) no-repeat 0 -28px;} .pingfen p{ position: absolute; top:24px; left: 0px; width: 134px; height: 28px; background: #fff; line-height: 28px; text-align: center; border:1px solid #333; display:none;} </style>
JS代码: <script> var aData =["很差","较差","一般","推荐","力推"]; window.onload=function(){ var oDiv = document.getElementById("rank"); var aLi = oDiv.getElementsByTagName("li"); var oP = oDiv.getElementsByTagName("p")[0]; var i =0; for(i=0;i<aLi.length;i++){ aLi[i].index = i; aLi[i].onmouseover = function(){ oP.style.display = "block"; oP.innerHTML=aData[this.index]; for(i=0; i<=this.index;i++){ aLi[i].className="active"; } }; aLi[i].onmouseout = function(){ oP.style.display = ""; for(i=0; i<aLi.length; i++){ aLi[i].className=""; } }; aLi[i].onclick=function(){ alert(this.index +1); }; } }; </script>
运行截图:
转载:http://xiaomiya.iteye.com/blog/2035333
由最代码官方编辑于2016-5-31 9:32:34
猜你喜欢
请下载代码后再发表评论
文件名:score_js.zip,文件大小:23.58K
下载
- /
- /score_js
- /score_js/sample.jpg
- /score_js/score.html
- /score_js/star.jpg
- /score_js

- 使用java和javascript判断当前浏览者的操作系统
- 证 javascript简单调色板工具
- js进度条(原创可用于学习)
- {Tonfay}[js动态报表][兼容IE6+/火狐/360/谷歌/等各大浏览器][可手动设置间隔时间读取数据/并且显示在图表上]
- 证 5个小javascript特效实例
- 证精 史上最短小精悍的javascript编写的俄罗斯方块游戏,仅仅60行代码
- 正则表达式的JS验证
- 证 js canvas无限生成国风水墨画
- js打印,预览的功能.希望采纳.
- 证 JavaScript写的贷款计算器源代码下载
- 证 纯js开发的时钟,带秒钟
- 证 js万年历查询设置工作日前端源代码分享

abcdljw LV20
2021年12月28日
rain2019 LV2
2019年2月26日
tony138 LV1
2018年9月5日
xsl258258 LV1
2018年8月29日
bianyuning LV14
2018年5月2日
小透明 LV1
2018年5月1日
gq1111111 LV1
2018年1月21日
taozero2008 LV3
2017年11月7日
板bbbbbb LV1
2017年8月19日
biao734436664 LV2
2017年5月30日