管理资源吧首页>>>教程>>>编程>>>JavaScript教程>>>

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

　　用到的图片如下：

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

　　在线演示地址：http://demo.glzy8.com/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; width:70px; height:12px; position:relative; background:url(http://demo.glzy8.com/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;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(http://demo.glzy8.com/demoimg/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(http://demo.glzy8.com/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.glzy8.com/" _ewebeditor_ta_href="http%3A%2F%2Fwww.glzy8.com%2F">管理资源吧</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="#" _ewebeditor_ta_href="%23" 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="#" _ewebeditor_ta_href="%23" 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="#" _ewebeditor_ta_href="%23" 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="#" _ewebeditor_ta_href="%23" 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="#" _ewebeditor_ta_href="%23" 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="#" _ewebeditor_ta_href="%23" 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="#" _ewebeditor_ta_href="%23" 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="#" _ewebeditor_ta_href="%23" 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="#" _ewebeditor_ta_href="%23" 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="#" _ewebeditor_ta_href="%23" 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="#" _ewebeditor_ta_href="%23" 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="#" _ewebeditor_ta_href="%23" 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="#" _ewebeditor_ta_href="%23" 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="#" _ewebeditor_ta_href="%23" 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="#" _ewebeditor_ta_href="%23" 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>

<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%20%0D%0A%0D%0A%3C!--%0D%0A%0D%0Afunction%20__start()%7B%0D%0A%0D%0A%20var%20initialize_width%3D0%3B%0D%0A%0D%0A%20if(document.getElelmentById)%7Breturn%20false%7D%3B%0D%0A%0D%0A%20if(document.getElementsByTagName%3D%3Dnull)%7Breturn%20false%3B%7D%0D%0A%0D%0A%20var%20startLevelObj%3Ddocument.getElementById(%22www_zzjs_net%22)%0D%0A%0D%0A%20if(startLevelObj%3D%3Dnull)%7Breturn%20false%3B%7D%0D%0A%0D%0A%20initialize_width%3DparseInt(startLevelObj.getAttribute(%22star_width%22)%2C10)%3B%0D%0A%0D%0A%20if(isNaN(initialize_width)%20%7C%7C%20initialize_width%3D%3D0)%7Breturn%20false%3B%7D%0D%0A%0D%0A%20var%20ul_obj%3DstartLevelObj.getElementsByTagName(%22ul%22)%3B%0D%0A%0D%0A%20if(ul_obj.length%3C1)%7Breturn%20false%3B%7D%0D%0A%0D%0A%20var%20length%3Dul_obj.length%3B%0D%0A%0D%0A%20var%20li_length%3D0%3B%0D%0A%0D%0A%20var%20a_length%3D0%3B%0D%0A%0D%0A%20var%20li_obj%3Dnull%3B%0D%0A%0D%0A%20var%20a_obj%3Dnull%3B%0D%0A%0D%0A%20var%20defaultInputObj%3Dnull%3B%0D%0A%0D%0A%20var%20defaultValue%3Dnull%3B%0D%0A%0D%0A%20for(var%20i%3D0%3Bi%3Clength%3Bi%2B%2B)%7B%0D%0A%0D%0A%20%20li_obj%3Dul_obj%5Bi%5D.getElementsByTagName(%22li%22)%3B%0D%0A%0D%0A%20%20li_length%3Dli_obj.length%3B%0D%0A%0D%0A%20%20if(li_length%3C0)%7Breturn%20false%3B%7D%0D%0A%0D%0A%20%20%2F%2F%E8%8E%B7%E5%8F%96%E9%BB%98%E8%AE%A4%E5%80%BC%0D%0A%0D%0A%20%20defaultInputObj%3Dli_obj%5B0%5D.getElementsByTagName(%22input%22)%3Bif(!defaultInputObj)%7Breturn%20false%3B%7D%0D%0A%0D%0A%20%20defaultValue%3DparseInt(defaultInputObj%5B0%5D.value%2C10)%3B%0D%0A%0D%0A%20%20if(!isNaN(defaultValue)%20%26%26%20defaultValue!%3D0)%7B%0D%0A%0D%0A%20%20%20%2F%2Falert(%22%E6%9C%89%E5%88%9D%E5%A7%8B%E5%80%BC!%22)%3B%0D%0A%0D%0A%20%20%20%2F%2Fli_obj%5B1%5D.style.width%3Dinitialize_width*defaultValue%2B%22px%22%3B%0D%0A%0D%0A%20%20%20%2F%2FdefaultValue%3D0%3B%0D%0A%0D%0A%20%20%7D%0D%0A%0D%0A%20%20for(var%20j%3D0%3Bj%3Cli_length%3Bj%2B%2B)%7B%0D%0A%0D%0A%20%20%20a_obj%3Dli_obj%5Bj%5D.getElementsByTagName(%22a%22)%3B%0D%0A%0D%0A%20%20%20if(a_obj.length%3C1)%7Bcontinue%3B%7D%0D%0A%0D%0A%20%20%20if(a_obj%5B0%5D.className.indexOf(%22star%22)%3E0)%7B%0D%0A%0D%0A%20%20%20%20a_obj%5B0%5D.onclick%3Dfunction()%7B%0D%0A%0D%0A%20%20%20%20%20return%20give_value(this)%3B%0D%0A%0D%0A%20%20%20%20%7D%0D%0A%0D%0A%20%20%20%20a_obj%5B0%5D.onfocus%3Dfunction()%7B%0D%0A%0D%0A%20%20%20%20%20this.blur()%3B%0D%0A%0D%0A%20%20%20%20%7D%0D%0A%0D%0A%20%20%20%7D%0D%0A%0D%0A%20%20%7D%0D%0A%0D%0A%20%7D%0D%0A%0D%0A%7D%0D%0A%0D%0Afunction%20give_value(obj)%7B%0D%0A%0D%0A%20var%20status%3Dtrue%3B%0D%0A%0D%0A%20var%20parent_obj%3Dobj.parentNode%3B%0D%0A%0D%0A%20var%20i%3D0%3B%0D%0A%0D%0A%20while(status)%7B%0D%0A%0D%0A%20%20i%2B%2B%3B%0D%0A%0D%0A%20%20if(parent_obj.nodeName%3D%3D%22UL%22)%7Bbreak%3B%7D%0D%0A%0D%0A%20%20parent_obj%3Dparent_obj.parentNode%3B%0D%0A%0D%0A%20%20if(i%3E1000)%7Bbreak%3B%7D%2F%2F%E9%98%B2%E6%AD%A2%E6%89%BE%E4%B8%8D%E5%88%B0ul%E5%8F%91%E7%94%9F%E6%AD%BB%E5%BE%AA%E7%8E%AF%0D%0A%0D%0A%20%7D%0D%0A%0D%0A%20var%20hidden_input%3Dparent_obj.getElementsByTagName(%22input%22)%5B0%5D%3B%0D%0A%0D%0A%20if(hidden_input.length%3C1)%7B%2F*alert(%22sorry%26%2363%3B%5Cnprogram%20error!%22)*%2F%3B%7D%0D%0A%0D%0A%20var%20txt%3Dobj.firstChild.nodeValue%3B%2F%2F%E7%A1%AE%E4%BF%9D%E4%B8%8D%E8%83%BD%E5%AD%98%E5%9C%A8%E7%A9%BA%E6%A0%BC%E5%93%A6%EF%BC%8C%E5%9B%A0%E4%B8%BA%E8%BF%99%E9%87%8C%E7%94%A8%E7%9A%84firstChild%0D%0A%0D%0A%20if(isNaN(parseInt(txt%2C10)))%7B%2F*alert('level%20error!')*%2F%3Breturn%20false%3B%7D%0D%0A%0D%0A%20hidden_input.setAttribute(%22value%22%2Ctxt.toString())%3B%0D%0A%0D%0A%20%2F%2F%E5%9B%BA%E5%AE%9A%E9%80%89%E4%B8%AD%E7%8A%B6%E6%80%81%2C%E5%85%88%E6%89%BE%E5%88%B0%E5%88%9D%E5%A7%8B%E5%8C%96%E9%A2%9C%E8%89%B2%E9%82%A3%E4%B8%AAli%0D%0A%0D%0A%20var%20current_li%3Dparent_obj.getElementsByTagName(%22li%22)%3B%0D%0A%0D%0A%20var%20length%3Dcurrent_li.length%3B%0D%0A%0D%0A%20var%20ok_li_obj%3Dnull%3B%0D%0A%0D%0A%20for(var%20i%3D0%3Bi%3Clength%3Bi%2B%2B)%7B%0D%0A%0D%0A%20%20if(current_li%5Bi%5D.className.indexOf(%22current_rating%22)%3E%3D0)%7B%0D%0A%0D%0A%20%20%20ok_li_obj%3Dcurrent_li%5Bi%5D%3Bbreak%3B%2F%2F%E6%89%BE%E5%88%B0%0D%0A%0D%0A%20%20%7D%0D%0A%0D%0A%20%7D%0D%0A%0D%0A%20__current_width%3Dtxt*14%3B%0D%0A%0D%0A%20ok_li_obj.style.width%3D__current_width%2B%22px%22%3B%0D%0A%0D%0A%20return%20false%3B%0D%0A%0D%0A%7D%0D%0A%0D%0A__start()%3B%0D%0A%0D%0A%2F%2F--%3E%0D%0A%0D%0A%3C%2Fscript%3E">

</body>

</html>

　　 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

教程首页更多教程