Js implementation of simple star selector submission effect is applicable to comments and so on

Star selector, submit code applicable to comments, etc

No js library, just separate js code
< img SRC = "border = 0 / / files.jb51.net/file_images/article/201310/20131018112344.gif? 201391811241 ">  

 
<form action="" method="get"> 
<div id="star_level" star_width="14"> 
<p> service </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> The price </p> 
<ul class="star_rating"> 
<li style="display:none;"> 
<input type="text" name="price" value="" title=" I'm going to set it to 2 That's the default 2 Star bright. " /> 
</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> The quality of </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=" After submitting, please see the parameters in the address bar " /> 
</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;} 
//Get the default value
defaultInputObj=li_obj[0].getElementsByTagName("input");if(!defaultInputObj){return false;} 
defaultValue=parseInt(defaultInputObj[0].value,10); 
if(!isNaN(defaultValue) && defaultValue!=0){ 
//Alert (" has an initial value!" );
//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;}//Prevent a dead loop if you can't find ul
} 
var hidden_input=parent_obj.getElementsByTagName("input")[0]; 
if(hidden_input.length<1){;} 
var txt=obj.firstChild.nodeValue;//Make sure there are no Spaces, because we're using "firstChild.
if(isNaN(parseInt(txt,10))){;return false;} 
hidden_input.setAttribute("value",txt.toString()); 
//I'm just going to go ahead and find the li that initializes the color
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;// find  
} 
} 
__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_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;} 
 
#star_level{margin:0 0 20px 20px;} 
#star_level p{margin:20px 0 5px 0;}