js实现简单的星级选择器提交效果适用于评论等


Posted in Javascript onOctober 18, 2013

星级选择器,提交代码适用于评论等

没有用到js库,就是单独的js代码
js实现简单的星级选择器提交效果适用于评论等 

<form action="" method="get"> 
<div id="star_level" star_width="14"> 
<p>服务</p> 
<ul class="star_rating"> 
<li style="display:none;"> 
<input type="text" name="serve" value="" /> 
</li> 
<li class="current_rating">default level</li> 
<li><a href="#" title="1 of 5 stars" class="one_star">1</a></li> 
<li><a href="#" title="2 of 5 stars" class="two_stars">2</a></li> 
<li><a href="#" title="3 of 5 stars" class="three_stars">3</a></li> 
<li><a href="#" title="4 of 5 stars" class="four_stars">4</a></li> 
<li><a href="#" title="5 of 5 stars" class="five_stars">5</a></li> 
</ul> 
<p>价格</p> 
<ul class="star_rating"> 
<li style="display:none;"> 
<input type="text" name="price" value="" title="这里设置为2的话,表示默认2颗星亮。" /> 
</li> 
<li class="current_rating">default level</li> 
<li><a href="#" title="1 of 5 stars" class="one_star">1</a></li> 
<li><a href="#" title="2 of 5 stars" class="two_stars">2</a></li> 
<li><a href="#" title="3 of 5 stars" class="three_stars">3</a></li> 
<li><a href="#" title="4 of 5 stars" class="four_stars">4</a></li> 
<li><a href="#" title="5 of 5 stars" class="five_stars">5</a></li> 
</ul> 
<p>质量</p> 
<ul class="star_rating"> 
<li style="display:none;"> 
<input type="text" name="mass" value="" /> 
</li> 
<li class="current_rating">default level</li> 
<li><a href="#" title="1 of 5 stars" class="one_star">1</a></li> 
<li><a href="#" title="2 of 5 stars" class="two_stars">2</a></li> 
<li><a href="#" title="3 of 5 stars" class="three_stars">3</a></li> 
<li><a href="#" title="4 of 5 stars" class="four_stars">4</a></li> 
<li><a href="#" title="5 of 5 stars" class="five_stars">5</a></li> 
</ul> 
</div> 
<input type="submit" value="提交后请看地址栏的参数" /> 
</form>

<script type="text/javascript"> 
<!-- 
function __start(){ 
var initialize_width=0; 
if(document.getElelmentById){return false}; 
if(document.getElementsByTagName==null){return false;} 
var startLevelObj=document.getElementById("star_level") 
if(startLevelObj==null){return false;} 
initialize_width=parseInt(startLevelObj.getAttribute("star_width"),10); 
if(isNaN(initialize_width) || initialize_width==0){return false;} 
var ul_obj=startLevelObj.getElementsByTagName("ul"); 
if(ul_obj.length<1){return false;} 
var length=ul_obj.length; 
var li_length=0; 
var a_length=0; 
var li_obj=null; 
var a_obj=null; 
var defaultInputObj=null; 
var defaultValue=null; 
for(var i=0;i<length;i++){ 
li_obj=ul_obj[i].getElementsByTagName("li"); 
li_length=li_obj.length; 
if(li_length<0){return false;} 
//获取默认值 
defaultInputObj=li_obj[0].getElementsByTagName("input");if(!defaultInputObj){return false;} 
defaultValue=parseInt(defaultInputObj[0].value,10); 
if(!isNaN(defaultValue) && defaultValue!=0){ 
//alert("有初始值!"); 
//li_obj[1].style.width=initialize_width*defaultValue+"px"; 
//defaultValue=0; 
} 
for(var j=0;j<li_length;j++){ 
a_obj=li_obj[j].getElementsByTagName("a"); 
if(a_obj.length<1){continue;} 
if(a_obj[0].className.indexOf("star")>0){ 
a_obj[0].onclick=function(){ 
return give_value(this); 
} 
a_obj[0].onfocus=function(){ 
this.blur(); 
} 
} 
} 
} 
} 
function give_value(obj){ 
var status=true; 
var parent_obj=obj.parentNode; 
var i=0; 
while(status){ 
i++; 
if(parent_obj.nodeName=="UL"){break;} 
parent_objparent_obj=parent_obj.parentNode; 
if(i>1000){break;}//防止找不到ul发生死循环 
} 
var hidden_input=parent_obj.getElementsByTagName("input")[0]; 
if(hidden_input.length<1){/*alert("sorry?\nprogram error!")*/;} 
var txt=obj.firstChild.nodeValue;//确保不能存在空格哦,因为这里用的firstChild 
if(isNaN(parseInt(txt,10))){/*alert('level error!')*/;return false;} 
hidden_input.setAttribute("value",txt.toString()); 
//固定选中状态,先找到初始化颜色那个li 
var current_li=parent_obj.getElementsByTagName("li"); 
var length=current_li.length; 
var ok_li_obj=null; 
for(var i=0;i<length;i++){ 
if(current_li[i].className.indexOf("current_rating")>=0){ 
ok_li_obj=current_li[i];break;//找到 
} 
} 
__current_width=txt*14; 
ok_li_obj.style.width=__current_width+"px"; 
return false; 
} 
__start(); 
//--> 
</script>

body{font-size:12px;} 
ul{padding:0;margin:0;} 
/*star.css*/ 
.star_rating {list-style:none;margin:-1px 0 0 -1px; padding:0; width:70px; height:12px; position:relative; background:url(rating_stars.gif) 0 0 repeat-x; overflow:hidden;font-size:0;} 
.star_rating li{padding:0;margin:0;float:left;} 
.star_rating li a{display:block;width:14px;height:12px;text-decoration:none;text-indent:-9000px;z-index:20;position:absolute;padding:0;margin:0;} 
.star_rating li a:hover{background:url(rating_stars.gif) 0 12px;z-index:2;left:0;} 
.star_rating a.one_star{left:0;} 
.star_rating a.one_star:hover{width:14px;} 
.star_rating a.two_stars{left:14px;} 
.star_rating a.two_stars:hover{width:28px;} 
.star_rating a.three_stars{left:28px;} 
.star_rating a.three_stars:hover{width:42px;} 
.star_rating a.four_stars{left:42px;} 
.star_rating a.four_stars:hover{width:56px;} 
.star_rating a.five_stars{left:56px;} 
.star_rating a.five_stars:hover{width:70px;} 
.star_rating li.current_rating{background:url(rating_stars.gif) 0 24px;position:absolute;height:12px;display:block;text-indent:-9000px;z-index:1;left:0;} 
/*end star.css*/ 
#star_level{margin:0 0 20px 20px;} 
#star_level p{margin:20px 0 5px 0;}
Javascript 相关文章推荐
JS简单的轮播的图片滚动实例
Jun 17 Javascript
使用POST方式弹出窗口的两种方法示例介绍
Jan 29 Javascript
js取整数、取余数的方法
May 11 Javascript
javascript圆盘抽奖程序实现原理和完整代码例子
Jun 03 Javascript
Javascript封装DOMContentLoaded事件实例
Jun 12 Javascript
jQuery中使用animate自定义动画的方法
May 29 Javascript
JavaScript实现相册弹窗功能(zepto.js)
Jun 21 Javascript
vue.js 表格分页ajax 异步加载数据
Oct 18 Javascript
vue综合组件间的通信详解
Nov 06 Javascript
vue实现条件叠加搜索的解决方法
May 28 Javascript
vue实现购物车的监听
Apr 20 Javascript
JS中的继承操作实例总结
Jun 06 Javascript
用jquery统计子菜单的条数示例代码
Oct 18 #Javascript
Jquery实现图片放大镜效果的思路及代码(自写)
Oct 18 #Javascript
通过length属性判断jquery对象是否存在
Oct 18 #Javascript
js 使FORM表单的所有元素不可编辑的示例代码
Oct 17 #Javascript
javascript中负数算术右移、逻辑右移的奥秘探索
Oct 17 #Javascript
jquery快捷动态绑定键盘事件的操作函数代码
Oct 17 #Javascript
js实现的常用的左侧导航效果
Oct 17 #Javascript
You might like
关于PHP 如何用 curl 读取 HTTP chunked 数据
2016/02/26 PHP
PHP结合Redis+MySQL实现冷热数据交换应用案例详解
2019/07/09 PHP
jquery实现焦点图片随机切换效果的方法
2015/03/12 Javascript
JavaScript中textRange对象使用方法小结
2015/03/24 Javascript
JavaScript中setFullYear()方法的使用详解
2015/06/11 Javascript
react.js 翻页插件实例代码
2017/01/19 Javascript
vue.js事件处理器是什么
2017/03/20 Javascript
整理一些最近经常遇到的前端面试题
2017/04/25 Javascript
全面解析jQuery中的$(window)与$(document)的用法区别
2017/08/15 jQuery
浅谈MUI框架中加载外部网页或服务器数据的方法
2018/01/31 Javascript
使用nvm和nrm优化node.js工作流的方法
2019/01/17 Javascript
基于Vue中使用节流Lodash throttle详解
2019/10/30 Javascript
Vue 实现拨打电话操作
2020/11/16 Javascript
[35:26]DOTA2上海特级锦标赛B组小组赛#2 VG VS Fnatic第三局
2016/02/26 DOTA
[51:39]DOTA2-DPC中国联赛 正赛 Magma vs LBZS BO3 第二场 2月7日
2021/03/11 DOTA
py中的目录与文件判别代码
2008/07/16 Python
详解Python的Django框架中的模版继承
2015/07/16 Python
Windows中使用wxPython和py2exe开发Python的GUI程序的实例教程
2016/07/11 Python
python 全局变量的import机制介绍
2017/09/07 Python
好的Python培训机构应该具备哪些条件
2018/05/23 Python
Python3.6基于正则实现的计算器示例【无优化简单注释版】
2018/06/14 Python
基于python代码实现简易滤除数字的方法
2018/07/17 Python
pygame游戏之旅 调用按钮实现游戏开始功能
2018/11/21 Python
python-tornado的接口用swagger进行包装的实例
2019/08/29 Python
如何打包Python Web项目实现免安装一键启动的方法
2020/05/21 Python
python如何调用字典的key
2020/05/25 Python
浅谈keras 模型用于预测时的注意事项
2020/06/27 Python
英国皇室御用百货:福南梅森(Fortnum & Mason)
2017/12/03 全球购物
英国Office鞋店德国网站:在线购买鞋子、靴子和运动鞋
2018/12/19 全球购物
navabi英国:设计师大码女装
2019/06/25 全球购物
维多利亚的秘密阿联酋官网:Victoria’s Secret阿联酋
2019/12/07 全球购物
初中同学会活动方案
2014/08/22 职场文书
写给女朋友的检讨书
2015/05/06 职场文书
学校2015年纠风工作总结
2015/05/15 职场文书
python实战之一步一步教你绘制小猪佩奇
2021/04/22 Python
教你在 Java 中实现 Dijkstra 最短路算法的方法
2022/04/08 Java/Android