点亮星星评分后,点击按钮,立即获得分数参数值,方便不想使用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; width: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;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.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{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.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?\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点亮星星评分并获取参数的js代码的更多相关文章

  1. req.getParameter()无法获取参数(附前端json序列化)

    问题:前端用Ajax的post方式想servlet传递参数,servlet的getParameter()方法无法获取参数. 前端代码: $.ajax({ url: '/TestWeb/addBook' ...

  2. Node.js express获取参数有三种方法

    express获取参数有三种方法:官网介绍如下 Checks route params (req.params), ex: /user/:id Checks query string params ( ...

  3. Node.js中的express框架获取参数

    express获取参数有三种方法: req.query  适合 http://localhost:3000/form?num=8888 req.body   适合http://localhost:30 ...

  4. js 获取参数

    <html lang="en"> <head> <meta charset="UTF-8"> <meta name=& ...

  5. js获取参数 解决乱码

    获取参数 function GetQueryString(name) { var reg = new RegExp("(^|&)" + name + "=([^& ...

  6. 原生js星星评分源码

    html: <div id="fiveStars"> <div>到场时间:<img v-for="(star,index) in stars ...

  7. HTML5商城开发三 jquery 星星评分插件

    展示:

  8. vue-router2.0动态路由获取参数

    一下demo演示2.0中的vue-router是如何获取到不同参数的,并在地址栏中匹配不同的信息 <!DOCTYPE html> <html lang="en"& ...

  9. JS读写浏览器cookie及读取页面参数

    JS读写浏览器cookie及读取页面参数 var zbrowser = { //设置浏览器cookie,exdays是cookie有效时间 setCookie: function (c_name, v ...

随机推荐

  1. guacamole实现上传下载

    目录 1. 源码解读 2. 上传下载的核心代码 分析的入手点,查看websocket连接的frame 看到首先服务端向客户端发送了filesystem请求,紧接着浏览器向服务端发送了get请求,并且后 ...

  2. cgi、fastcgi、php-cgi、php-fpm的关系

    1. CGI CGI全称是"公共网关接口"(Common Gateway Interface),HTTP服务器与你的或其它机器上的程序进行"交谈"的一种工具,其 ...

  3. java线程池技术

    1.线程池的实现原理?简介: 多线程技术主要解决处理器单元内多个线程执行的问题,它可以显著减少处理器单元的闲置时间,增加处理器单元的吞吐能力.假设一个服务器完成一项任务所需时间为:T1 创建线程时间, ...

  4. 深入浅出 Webpack

    深入浅出 Webpack 评价 Webpack 凭借强大的功能与良好的使用体验,已经成为目前最流行,社区最活跃的打包工具,是现代 Web 开发必须掌握的技能之一.作者结合自身的实战经验,介绍了 Web ...

  5. linux ----- Vim进入和退出命令

    Vim进入和退出命令     本来不想写任何关于vim的文章的,无奈我今天又忘记怎么退出vim了,常用命令是ESC,然后:wq(保存并退出),:q!(不保存并强制退出),i进入vim模式.另外还有其它 ...

  6. liunx运维必备150个基础命令

    经过上次的面试,总结了一下的linux系统常用命令: 命令 功能说明 线上查询及帮助命令(2个) man 查看命令帮助,命令的词典,更复杂的还有info,但不常用. help 查看Linux内置命令的 ...

  7. 文件特殊权限:SUID,SGID,SBIT

    我们之前认识的文件的权限仅局限于r,w,x,但如果我们执行命令“ll /tmp; ll /usr/bin/passwd”,会出现除了r,w,x之外的其他字母: 即出现了特殊权限(s跟t). [SetU ...

  8. android命令模式IntentService 远程下载文件

    服务可用在一下情景: 1,用户离开activity后,仍需要继续工作,例如从网络下载文件,播放音乐. 2,无论activity出现或离开,都需要持续工作,例如网络聊天应用. 3,连接网络服务,正在使用 ...

  9. 修改虚拟机上Linux系统的IP地址

    然后再输入:ifconfig eth0 192.168.11.6 netmask 255.255.255.0   . 这样就可以把网卡eth0的IP地址修改为 192.168.11.6

  10. HighCharts中几种tooltip的显示格式

    推荐学习地址 => https://www.hcharts.cn/docs/basic-tooltip   https://api.hcharts.cn/#Highcharts.numberFo ...