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










