js点亮星星评分并获取参数示例代码_js广告代码

当前位置：首页 > 脚本编程 > javascript实例 > js广告代码 > 正文

js点亮星星评分并获取参数示例代码: 发布时间：2020-04-03编辑：脚本学堂

本文介绍了js实现点亮星星评分，然后获取参数值的方法，js星星评分实例代码，需要的朋友参考下。

用js脚本实现点亮星星评分后，点击按钮，立即获得分数参数值。
用到的图片：

完整代码：

复制代码代码示例:

<!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.jb200.comt,脚本学堂，站长必备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.jb200.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.jb200.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.jb200.com/demoimg/rating_stars.gif) 0 4px;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.jb200.com/">脚本学堂</a>,站长必备的高质量网页特效和广告代码。<hr>
<form action="" method="get">
<div id="www_zzjs_net" star_width="14">
<p>服务</p>
<ul class="star_rating">

</li>

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

</ul>

</li>

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

</ul>

</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="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?nprogram 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>

上一篇：js星星评分效果实例
下一篇：javascript星级评分效果示例代码

与 js点亮星星评分并获取参数示例代码有关的文章

本文标题：js点亮星星评分并获取参数示例代码
本页链接：http://www.jb200.com/article/23631.html

浏览排行

栏目分类

热点文章

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