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代码
Oct 11 Javascript
node.js中的fs.unlink方法使用说明
Dec 15 Javascript
jQuery中ajax的load()与post()方法实例详解
Jan 05 Javascript
理解js对象继承的N种模式
Jan 25 Javascript
【经验总结】编写JavaScript代码时应遵循的14条规律
Jun 20 Javascript
jquery select2的使用心得(推荐)
Dec 04 Javascript
Bootstrap基本组件学习笔记之导航(10)
Dec 07 Javascript
js代码延迟一定时间后执行一个函数的实例
Feb 15 Javascript
Vue.js实现模拟微信朋友圈开发demo
Apr 20 Javascript
JS实现仿饿了么在浏览器标签页失去焦点时网页Title改变
Jun 01 Javascript
浅谈vue父子组件怎么传值
Jul 21 Javascript
原生js实现公告滚动效果
Jan 10 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 文章调用类代码
2011/08/11 PHP
PHP 前加at符合@的作用解析
2015/07/31 PHP
php给图片加文字水印
2015/07/31 PHP
window.dialogArguments 使用说明
2011/04/11 Javascript
Jquery的基本对象转换和文档加载用法实例
2015/02/25 Javascript
jQuery获得包含margin的outerWidth和outerHeight的方法
2015/03/25 Javascript
CSS图片响应式 垂直水平居中
2015/08/14 Javascript
jQuery获取某天的农历日期并判断是否除夕或新年的方法
2016/03/01 Javascript
JS中多种方式创建对象详解
2016/03/22 Javascript
原生JS实现图片轮播与淡入效果的简单实例
2016/08/21 Javascript
bootstrap datetimepicker日期插件使用方法
2017/01/13 Javascript
详解Vue-基本标签和自定义控件
2017/03/24 Javascript
基于react后端渲染模板引擎noox发布使用
2018/01/11 Javascript
vue2使用keep-alive缓存多层列表页的方法
2018/09/21 Javascript
JavaScript设计模式之享元模式实例详解
2019/01/17 Javascript
[01:13:59]LGD vs Mineski Supermajor 胜者组 BO3 第三场 6.5
2018/06/06 DOTA
[01:04:30]Fnatic vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
[01:08:00]Fnatic vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python实现的文本简单可逆加密算法示例
2017/05/18 Python
python实现微信自动回复功能
2018/04/11 Python
python计算阶乘和的方法(1!+2!+3!+...+n!)
2019/02/01 Python
浅谈pyqt5在QMainWindow中布局的问题
2019/06/21 Python
解决Keras中Embedding层masking与Concatenate层不可调和的问题
2020/06/18 Python
HTML5对手机页面长按会粘贴复制禁用的解决方法
2016/07/19 HTML / CSS
html5 Canvas画图教程(5)—canvas里画曲线之arc方法
2013/01/09 HTML / CSS
购买澳大利亚最好的服装和内衣在线:BONDS
2016/10/14 全球购物
加拿大建筑和装修专家:Reno-Depot
2017/12/21 全球购物
英国鲜花递送:Blossoming Gifts
2020/07/10 全球购物
巧克力蛋糕店创业计划书
2014/01/14 职场文书
工作会议欢迎词
2014/01/16 职场文书
教师师德师风整改措施
2014/10/24 职场文书
军事理论课感想
2015/08/11 职场文书
小学一年级数学教学反思
2016/02/16 职场文书
个人的事迹材料怎么写
2019/04/24 职场文书
python基础学习之生成器与文件系统知识总结
2021/05/25 Python
Python 如何将integer转化为罗马数(3999以内)
2021/06/05 Python