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 相关文章推荐
JavaScript 实现??打印?理
Apr 28 Javascript
Javascript学习笔记 delete运算符
Sep 13 Javascript
javascript中this的四种用法
May 11 Javascript
JavaScript+canvas实现七色板效果实例
Feb 18 Javascript
JS函数定义方式的区别介绍
Mar 22 Javascript
javascript和jQuery实现网页实时聊天的ajax长轮询
Jul 20 Javascript
微信小程序 视图层(xx.xml)和逻辑层(xx.js)详细介绍
Oct 13 Javascript
node学习记录之搭建web服务器教程
Feb 16 Javascript
详解基于Angular4+ server render(服务端渲染)开发教程
Aug 28 Javascript
基于JSON数据格式详解
Aug 31 Javascript
vue+express 构建后台管理系统的示例代码
Jul 19 Javascript
10种JavaScript最常见的错误(小结)
Jun 21 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环境搭建最新方法
2006/09/05 PHP
经典海量jQuery插件 大家可以收藏一下
2010/02/07 Javascript
javascript全局变量封装模块实现代码
2012/11/28 Javascript
使用GruntJS构建Web程序之Tasks(任务)篇
2014/06/06 Javascript
js中substr,substring,indexOf,lastIndexOf,split,replace的用法详解
2015/11/09 Javascript
jQuery easyUI datagrid 增加求和统计行的实现代码
2016/06/01 Javascript
javascript this详细介绍
2016/09/19 Javascript
jquery.multiselect多选下拉框实现代码
2016/11/11 Javascript
微信小程序 swiper组件轮播图详解及实例
2016/11/16 Javascript
基于jQuery的select下拉框选择触发事件实例分析
2016/11/18 Javascript
详解Angular2响应式表单
2017/06/14 Javascript
JavaScript高阶函数_动力节点Java学院整理
2017/06/28 Javascript
元素全屏的设置与监听实例
2017/11/28 Javascript
使用node-media-server搭建一个简易的流媒体服务器
2021/01/20 Javascript
[51:00]Secret vs VGJ.S 2018国际邀请赛淘汰赛BO3 第一场 8.24
2018/08/25 DOTA
python实现图片彩色转化为素描
2019/01/15 Python
详解python算法之冒泡排序
2019/03/05 Python
使用Pandas对数据进行筛选和排序的实现
2019/07/29 Python
Python 字符串、列表、元组的截取与切片操作示例
2019/09/17 Python
python 输入字符串生成所有有效的IP地址(LeetCode 93号题)
2020/10/15 Python
Python爬取酷狗MP3音频的步骤
2021/02/26 Python
美国鞋类购物网站:Shiekh Shoes
2016/08/21 全球购物
加拿大鞋子连锁店:Town Shoes
2016/09/26 全球购物
北美最大的参茸药食商城:德成行
2020/12/06 全球购物
小学生演讲稿
2014/01/12 职场文书
多媒体专业自我鉴定
2014/02/28 职场文书
会议室标语
2014/06/21 职场文书
退休党员个人对照检查材料思想汇报
2014/09/29 职场文书
优秀教师个人材料
2014/12/15 职场文书
幼儿园欢迎词范文
2015/01/26 职场文书
2015年社区矫正工作总结
2015/04/21 职场文书
2015年乡镇财政工作总结
2015/05/19 职场文书
学生党支部工作总结2015
2015/05/26 职场文书
初中同学会致辞
2015/08/01 职场文书
2019公司管理制度
2019/04/19 职场文书
Netty结合Protobuf进行编解码的方法
2021/06/26 Java/Android