js星星评分效果
2014-07-24 00:00
471 查看
html如下:
css样式:
最后js调用如下:
查看演示 http://demo.jb51.net/js/2014/jsxxdf/
如果有喜欢使用基于jquery的星星打分效果,可以参考这个地址:http://www.jb51.net/jiaoben/195077.html
<div class="starts"> <ul id="pingStar"> <li rel="1" title="特别差,给1分"></li> <li rel="2" title="很差,给2分"></li> <li rel="3" title="一般般,给3分"></li> <li rel="4" title="很好,给4分"></li> <li rel="5" title="非常好,给5分"></li> <span id="dir"></span> </ul> <input type="hidden" value="" id="startP"> </div>
css样式:
.starts,.starts ul{float:left;} .starts{padding-left:16px;padding-top:7px;} .starts ul li{width:32px;height:31px;float:left;background:#ddd;padding-right:3px;} .starts ul li.on{background:red;} .starts ul span{display:inline;float:left;padding-left:10px;height:31px;line-height:31px;}
最后js调用如下:
window.onload = function () { var s = document.getElementById("pingStar"), m = document.getElementById('dir'), n = s.getElementsByTagName("li"), input = document.getElementById('startP'); //保存所选值 clearAll = function () { for (var i = 0; i < n.length; i++) { n[i].className = ''; } } for (var i = 0; i < n.length; i++) { n[i].onclick = function () { var q = this.getAttribute("rel"); clearAll(); input.value = q; for (var i = 0; i < q; i++) { n[i].className = 'on'; } m.innerHTML = this.getAttribute("title"); } n[i].onmouseover = function () { var q = this.getAttribute("rel"); clearAll(); for (var i = 0; i < q; i++) { n[i].className = 'on'; } } n[i].onmouseout = function () { clearAll(); for (var i = 0; i < input.value; i++) { n[i].className = 'on'; } } } }
查看演示 http://demo.jb51.net/js/2014/jsxxdf/
如果有喜欢使用基于jquery的星星打分效果,可以参考这个地址:http://www.jb51.net/jiaoben/195077.html
相关文章推荐
- js实现星星评分效果
- js实现商城星星评分的效果
- js实现商城星星评分的效果
- js星星评分效果
- js+css 模仿淘宝评分效果
- WinForm"仿js星形评分效果"控件制作经验分享(原创) 之配餐系统的开发
- JS实现仿中关村论坛评分后弹出提示效果的方法
- JS实现带提示的星级评分效果完整实例
- 星级评分效果 -js实现
- 关于伪类的使用的一些心得以及星星评分效果的实现
- JS DOM 五角星的评分效果
- js实现的星星评分功能函数
- Js实现网站常用的评分效果!
- jquery星星评分效果(1/5)
- js实现的星星评分特效
- 2颗星星+纯CSS实现星星评分交互效果
- WinForm"仿js星形评分效果"控件制作经验分享(原创) 之配餐系统的开发
- js实现星星评分
- [Js]评分星星
- js星级评分点击星级评论打分效果--收藏--转载