Tip: You can modify some of the code before running
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; Charset=utf-8 "/> <title> with CSS star rating code </title> <style type=" Text/css "> <!--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 (yun_qi_img/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 (yun_qi_img/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 (yun_qi_img/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}--> </style> </pead> <body> <p> added star selector for behavior </p> & Lt;p> presentation layer code originated from China Web first stop, I write only the behavior. </p> <form action= "" method= "get" > <div id= "star_level" star_width= "" > <p> service </p> < UL class= "star_rating" > <li > <input type= "text" name= "Serve" value= ""/> </li> <li class= "current_rating" >default level</li> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> <p> Price </ p> <ul class= "star_rating" > <li > <input type= "text" name= "Price" value= "4" title= "Here is set to 2, which means The default 2 stars are bright. "/> </li> <li class=" current_rating ">default level</li> <li>1</li> <li> ;2</li> <li>3</li> <li>4</li> <li>5</li> </ul> <p> Quality ;/p> <ul class= "star_rating" > <li > <input type= "text" name= "mass" value= ""/> </LI&G T <li class= "current_rating" >default level</li> <li>1</li> <li>2</li> <li> ;3</li> <li>4</li> <li>5</li> </ul> </div> <input type= "Submit" Val Ue= "Select the Star, point me, and then look at the address bar." "/> </form> </body> </ptml> <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;} Gets 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 ("have 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_obj=parent_obj.parentnode; if (i>1000) {break;} Prevent can't find the UL occurrence dead cycle} var hidden_input=parent_obj.getelementsbytagname ("input") [0]; if (hidden_input.length<1) {/*alert ("Sorry?nprogram error!") */;} Var txt=obj.firstchild.nodevalue;//ensures that no spaces exist, because the FirstChild if (isNaN (parseint (txt,10)) {/*alert) is used here (' Level error! ') */;return false; Hidden_input.setattribute ("Value", txt.tostring ()); Fixed the selected state, first find the initialization color of the 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;//find} __current_width=txt*14; ok_li_obj.style.width=__current_width+ "px"; return false; } __start (); --> </script>
Tip: You can modify some of the code before running
