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

随机推荐

js字符串操作函数
js字符串函数 JS自带函数 concat 将两个或多个字符的文本组合起来,返回一个新的字符串. var a = "hello"; var b = ",world&quo ...
android开源项目之OTTO事件总线（一）
Otto是由Square发布的一个着重于Android支持的基于Guava的强大的事件总线,在对应用程序不同部分进行解耦之后,仍然允许它们进行有效的沟通. 开源项目地址:https://github. ...
Epplus下的一个将Excel转换成List的范型帮助类
因为前一段时间公司做项目的时候,用到了Excel导入和导出,然后自己找了个插件Epplus进行操作,自己将当时的一些代码抽离出来写了一个帮助类. 因为帮助类是在Epplus基础之上写的,项目需要引用E ...
快速平方根算法的javascript实现
前几天看见了一个来自雷神之槌的平方根源码,原理多方有介绍,不赘述. 源码是c语言写的,我思考后发现这样的算法在javascript中也是可以完成的. function InvSqrt(x){ var ...
Python中send()和sendall()的区别
Python中send()和sendall()的区别估计每个学习Python网络编程的人,都会遇到过这样的问题: send()和sendall()到底有什么区别? send()和sendall()原 ...
[Binary Search] Leetcode 35, 74
35. Search Insert Position Description Given a sorted array and a target value, return the index if ...
Faster RCNN代码解析
1.faster_rcnn_end2end训练 1.1训练入口及配置 def train(): cfg.GPU_ID = 0 cfg_file = "../experiments/cfgs/ ...
如何使用remix
---恢复内容开始--- 教程 | [Ethereum 智能合约开发笔记]使用 Remix Ajian | 3. Feb, 2018 | 621 次阅读教程 Remix 开发工具之前有自己开发过E ...
C++STL——list
一.相关定义 list 链表,分配的内存不连续可以高效地进行插入/删除元素不可随机访问,访问速度慢特征只能通过迭代器来访问list中的元素在头和尾都可以插入元素二.list [前提条件] ...
week12第二轮迭代任务分配forZ.XML
Z.XML第二轮迭代任务初步分配新鲜出炉,请关注! 以上便是任务分配列表,队员们会按照进度每天更改任务进度当然,根据敏捷开发的方法,我们将在开发过程中根据情况迅速调整任务分配,以适应当时问题. Z- ...

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

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

随机推荐

热门专题