Js implements a simple star selector to submit results suitable for comments, etc.

Star selector. Code submission applies to comments.

Js libraries are not used, but separate js Code.
 
Copy codeThe Code is as follows:
<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> price </p>
<Ul class = "star_rating">
<Li style = "display: none;">
<Input type = "text" name = "price" value = "" title = "if this parameter is set to 2, the default value is 2 stars. "/>
</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> Quality </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 = "parameters in the address bar after submission"/>
</Form>

Copy codeThe Code is as follows:
<Script type = "text/javascript">
<! --
Function _ start (){
Var initialize_width = 0;
If (document. getelmentbyid) {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 ;}
// Obtain 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 ("there is 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 ("");
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;} // prevents endless loops when ul is not found
}
Var hidden_input = parent_obj.getElementsByTagName ("input") [0];
If (hidden_input.length <1) {/* alert ("sorry? \ Nprogram error! ")*/;}
Var txt = obj. firstChild. nodeValue; // ensure that no space exists.
If (isNaN (parseInt (txt, 10) {/* alert ('level error! ') */; Return false ;}
Hidden_input.setAttribute ("value", txt. toString ());
// Fixed the selected status. First, find the li in the initialization 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; // locate
}
}
_ Current_width = txt * 14;
OK _li_obj.style.width =__ current_width + "px ";
Return false;
}
_ Start ();
// -->
</Script>

Copy codeThe Code is as follows:
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 ;}