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">

<head>

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

<!--

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>

</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>

</ul>

</div>

</form>

<!--

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代码的更多相关文章

req.getParameter()无法获取参数（附前端json序列化）
问题:前端用Ajax的post方式想servlet传递参数,servlet的getParameter()方法无法获取参数. 前端代码: $.ajax({ url: '/TestWeb/addBook' ...
Node.js express获取参数有三种方法
express获取参数有三种方法:官网介绍如下 Checks route params (req.params), ex: /user/:id Checks query string params ( ...
Node.js中的express框架获取参数
express获取参数有三种方法: req.query 适合 http://localhost:3000/form?num=8888 req.body 适合http://localhost:30 ...
js 获取参数
<html lang="en"> <head> <meta charset="UTF-8"> <meta name=& ...
js获取参数解决乱码
获取参数 function GetQueryString(name) { var reg = new RegExp("(^|&)" + name + "=([^& ...
原生js星星评分源码
html: <div id="fiveStars"> <div>到场时间:<img v-for="(star,index) in stars ...
HTML5商城开发三 jquery 星星评分插件
展示:
vue-router2.0动态路由获取参数
一下demo演示2.0中的vue-router是如何获取到不同参数的,并在地址栏中匹配不同的信息 <!DOCTYPE html> <html lang="en"& ...
JS读写浏览器cookie及读取页面参数
JS读写浏览器cookie及读取页面参数 var zbrowser = { //设置浏览器cookie,exdays是cookie有效时间 setCookie: function (c_name, v ...

随机推荐

Vue 去脚手架插件，自动加载vue文件
接上回一些本质本质上,去脚手架也好,读取vue文件也好,无非是维护options,每个Vue对象的初始化配置对象不触及Vue内部而言,在外部想怎么改都是可以的,只要保证options的正确,一切都 ...
「日常训练」Alena And The Heater (CFR466D2D)
题意(Codeforces 940D) 根据给定要求构建数列,求能构建出相同数列的l和r. 分析这题写的是真的烦.一定要想到对b串要按照5个5个的看!为什么5个5个的看?因为根据题意,是先看前4个再 ...
deepin linux 安装/启动jeakins报错：处理
ERROR: No Java executable found in current PATH: /bin:/usr/bin:/sbin:/usr/sbin 安装报错: 1.如还未安装java,则安装 ...
jmeter4.0☞如何汉化（二）
如何汉化jmeter打开jmeter,选择options_choose language_Chinese(simplified),如下图: 刚刚下载使用jmeter4.0的时候有点懵圈,英语实在是差劲 ...
Git创建project
1.登录创建新仓库命名 2.https://gitforwindows.org/ 下载git的windows客户端,输入git查看是否成功 3.创建文件夹,写内容并查看,和linux指令一样 4. ...
ThinkPHP5 Model分层及多对多关联的建立
笔者最近入手ThinkPHP5,准备用它来实现一个学生作业管理系统.简单的说就是学生在上面交老师布置的课程作业,老师也可以发布修改作业.过程中势必会碰到学生.班级和老师之间的关系.它们之间的关系是多对 ...
【CodeForces】9A-Die Roll
目录 Question Solution 解法1 解法2 Question 三个人掷骰子,前两个人的得分分别是Y和W,问第三个人胜利的概率(第三个人得分不小于Y.W)?结果输出格式为$A/B$,如 ...
MySQL训练营02
一.表操作: 1.MySQL表的数据类型: MySQL的数据类型分为3种: 数值时间/日期字符/字符串 (1)数值类型: 包括:TinyInt.SmallInt.MediumInt.Int.Big ...
remix无法安装的解决方案
无法安装的原因: 因为remix依赖python 执行python又依赖c++的环境所以连环导致出错 https://github.com/nodejs/node-gyp 措施一:降级处理先清理缓 ...
AndroidStudio0.5.5发布
Google%E5%9C%A8%E5%BC%80%E6%BA%90%E4%B8%8A%E7%9A%84%E8%B4%A1%E7%8C%AE http://music.baidu.com/songlis ...

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

js点亮星星评分并获取参数的js代码的更多相关文章

随机推荐

热门专题