Tip: you can modify some 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>Semi-original-star selector</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 a star selector for the action.</p><p>The presentation layer code originated from the first stop of the Chinese WEB, and I only write the behavior.</p><form action="" method="get"><div id="star_level" star_width="14"><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="这里设置为2的话，表示默认2颗星亮。" /></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><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" value="选好星星后，点我，然后看地址栏。" /></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;}//获取默认值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_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;//确保不能存在空格哦，因为这里用的firstChildif(isNaN(parseInt(txt,10))){/*alert('level error!')*/;return false;}hidden_input.setAttribute("value",txt.toString());//固定选中状态,先找到初始化颜色那个livar 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>
Tip: you can modify some code before running
