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 相关文章推荐
IE浏览器PNG图片透明效果代码
Sep 02 Javascript
解决jquery中美元符号命名冲突问题
Jan 08 Javascript
js/jquery解析json和数组格式的方法详解
Jan 09 Javascript
javascript模拟php函数in_array
Apr 27 Javascript
JavaScript实现添加及删除事件的方法小结
Aug 04 Javascript
使用JS实现图片展示瀑布流效果(简单实例)
Sep 06 Javascript
javascript的document中的动态添加标签实现方法
Oct 24 Javascript
JS批量替换内容中关键词为超链接
Feb 20 Javascript
react.js 父子组件数据绑定实时通讯的示例代码
Sep 25 Javascript
JS Input里添加小图标的两种方法
Nov 11 Javascript
在vue中使用Base64转码的案例
Aug 07 Javascript
Vue实现导入Excel功能步骤详解
Jul 03 Vue.js
用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扩展ZF――Validate扩展
2008/01/10 PHP
ecshop 批量上传(加入自定义属性)
2012/03/20 PHP
php日期转时间戳,指定日期转换成时间戳
2012/07/17 PHP
基于Laravel实现的用户动态模块开发
2017/09/21 PHP
laravel框架中间件 except 和 only 的用法示例
2019/07/12 PHP
laravel 框架执行流程与原理简单分析
2020/02/01 PHP
javascript下IE与FF兼容函数收集
2008/09/17 Javascript
js 数组操作代码集锦
2009/04/28 Javascript
js 对联广告、漂浮广告封装类(IE,FF,Opera,Safari,Chrome
2009/11/26 Javascript
javascript preload&amp;lazy load
2010/05/13 Javascript
动态创建script标签实现跨域资源访问的方法介绍
2014/02/28 Javascript
常用jQuery代码分享
2015/07/14 Javascript
js控制元素显示在屏幕固定位置及监听屏幕高度变化的方法
2015/08/11 Javascript
JavaScript实现网页加载进度条代码超简单
2015/09/21 Javascript
asp知识整理笔记3(问答模式)
2015/09/27 Javascript
JS实现的竖向折叠菜单代码
2015/10/21 Javascript
jQuery获取同级元素的简单代码
2016/07/09 Javascript
js+html制作简单验证码
2017/02/16 Javascript
小程序实现日历左右滑动效果
2019/10/21 Javascript
nest.js 使用express需要提供多个静态目录的操作方法
2019/10/24 Javascript
解决vue 退出动画无效的问题
2020/08/09 Javascript
Javascript柯里化实现原理及作用解析
2020/10/22 Javascript
[16:56]heroes英雄教学 司夜刺客
2014/09/18 DOTA
[01:00:53]OG vs IG 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python处理multipart/form-data的请求方法
2018/12/26 Python
pandas DataFrame运算的实现
2020/06/14 Python
Python 如何创建一个简单的REST接口
2020/07/30 Python
发现两个有趣的CSS3动画效果
2013/08/14 HTML / CSS
Html5 localStorage入门教程
2018/04/26 HTML / CSS
法国珠宝店:CLEOR
2017/01/29 全球购物
墨西哥网上超市:Superama
2018/07/10 全球购物
印度尼西亚最好的小工具在线商店:Erafone.com
2019/03/26 全球购物
请问软件开发中的设计模式你会使用哪些
2015/05/13 面试题
金属材料工程个人求职的自我评价
2013/12/04 职场文书
群众对十八届四中全会的期盼
2014/10/17 职场文书
Python 处理表格进行成绩排序的操作代码
2021/07/26 Python