js点亮星星评分并获取参数的js代码

点亮星星评分后，点击按钮，立即获得分数参数值，方便不想使用ajax传参的朋友

http://demo.jb51.net/js/2014/jsxxdf/demo2.html


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="content-type" content="text/html;charset=gb2312">

<meta name="keywords" content="站长,网页特效,网页特效代码,js特效,js脚本,脚本,广告代码,站长特效 网" />

<meta name="description" content="www.zzjs.net,脚本之家，站长必备js特效及广告代码。大量高质量js特效，提供高质量广告代码下载,尽在脚本之家" />

<title>网页特效 添加行为的星星评级效果 脚本之家欢迎您.</title>

<style type="text/css">

<!--

body{font-size:12px;}

ul{padding:0;margin:0;}

.star_rating {list-style:none;margin:-1px 0 0 -1px; padding:0; 70px; height:12px; position:relative; background:url(http://demo.jb51.net/demoimg/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;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(http://demo.jb51.net/demoimg/rating_stars.gif) 0 12px;z-index:2;left:0;}

.star_rating a.one_star{left:0;}

.star_rating a.one_star:hover{14px;}

.star_rating a.two_stars{left:14px;}

.star_rating a.two_stars:hover{28px;}

.star_rating a.three_stars{left:28px;}

.star_rating a.three_stars:hover{42px;}

.star_rating a.four_stars{left:42px;}

.star_rating a.four_stars:hover{56px;}

.star_rating a.five_stars{left:56px;}

.star_rating a.five_stars:hover{70px;}

.star_rating li.current_rating{background:url(http://demo.jb51.net/demoimg/rating_stars.gif) 0 24px;position:absolute;height:12px;display:block;text-indent:-9000px;z-index:1;left:0;}

#www_zzjs_net{margin:0 0 20px 20px;}

#www_zzjs_net p{margin:20px 0 5px 0;}

-->

</style>

</head>

<body>

<a href="http://www.jb51.net/">脚本之家</a>,站长必备的高质量网页特效和广告代码。<hr>

<form action="" method="get">

 <div id="www_zzjs_net" star_width="14">

  <p>服务</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="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="1 of 5 stars" class="one_star">1</a></li>

   <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="2 of 5 stars" class="two_stars">2</a></li>

   <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="3 of 5 stars" class="three_stars">3</a></li>

   <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="4 of 5 stars" class="four_stars">4</a></li>

   <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="5 of 5 stars" class="five_stars">5</a></li>

  </ul>

  <p>价格</p>

  <ul class="star_rating">

   <li style="display:none;">

    <input type="text" name="price" value="" />

   </li>

   <li class="current_rating">default level</li>

   <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="1 of 5 stars" class="one_star">1</a></li>

   <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="2 of 5 stars" class="two_stars">2</a></li>

   <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="3 of 5 stars" class="three_stars">3</a></li>

   <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="4 of 5 stars" class="four_stars">4</a></li>

   <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="5 of 5 stars" class="five_stars">5</a></li>

  </ul>

  <p>质量</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="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="1 of 5 stars" class="one_star">1</a></li>

   <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="2 of 5 stars" class="two_stars">2</a></li>

   <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="3 of 5 stars" class="three_stars">3</a></li>

   <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="4 of 5 stars" class="four_stars">4</a></li>

   <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="5 of 5 stars" class="five_stars">5</a></li>

  </ul>

 </div>

 <input type="submit" value="选好星星后，点我，然后看地址栏" />

</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("www_zzjs_net")

 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? program error!")*/;}

 var txt=obj.firstChild.nodeValue;//确保不能存在空格哦，因为这里用的firstChild

 if(isNaN(parseInt(txt,10))){/*alert('level error!')*/;return false;}

 hidden_input.setAttribute("value",txt.toString());

 //固定选中状态,先找到初始化颜色那个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;//找到

  }

 }

 __current_width=txt*14;

 ok_li_obj.style.width=__current_width+"px";

 return false;

}

__start();

//-->

</script>

</body>

</html>

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/mm2015/p/4674137.html