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

随机推荐

[bzoj5158][Tjoi2014]Alice and Bob
好羞愧啊最近一直在刷水... 题意:给定序列$c$的$a_i$,构造出一个序列$c$使得$\sum b_i$最大. 其中$a_i$表示以$c_i$结尾的最长上升子序列长度,$b_i$表示以$c_i$为 ...
dubbo心跳机制（1）
此文已由作者赵计刚授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. dubbo的心跳机制: 目的:检测provider与consumer之间的connection连接是不是还连 ...
实现一个简单版的express
express应该算是早期最优秀的一个node框架了,刚开始学node做后端语言就是用的express,它的cli可以帮我们搭建好项目目录,就像现在的vue,react一样.express本身没有做太 ...
PowerDesigner 使用记录
使用PowerDesigner 16.5 设计数据库表结构的操作过程: 第一步:打开PowerDesigner工具第二步:创建一个新的数据模型,选择 File -> New Model -&g ...
SQL 语句中 exists和not exists的用法
exists (sql 返回结果集,为真) not exists (sql 不返回结果集,为真) 如下: 表A ID NAME ...
Docker安装Zabbix全记录
零.Zabbix架构设计一.docker安装mysql 查找Docker Hub上的mysql镜像: [root@10e131e69e15 ~]# docker search mysql INDEX ...
以太坊生成助记词和infuru插件
https://iancoleman.io/bip39/ https://infura.io google faucet : https://faucet.rinkeby.io/ 登录google账号 ...
kill命令详解
基础命令学习目录首页原文链接:https://www.cnblogs.com/wangcp-2014/p/5146343.html 1．命令格式: kill[参数][进程号] 2．命令功能: 发送指 ...
eclipse 创建Makefile工程生成多个执行文件
1.创建Makefile工程 2.创建inc src Debug 目录用于存放头文件源文件 3.编写Makefile 需要在有源文件的目标天剑Makefile文件,如下给出一个生成两个target的 ...
小C的记事本（栈记录字符串）
链接:https://www.nowcoder.com/acm/contest/122/D来源:牛客网题目描述小C最近学会了java小程序的开发,他很开心,于是想做一个简单的记事本程序练练手. 他 ...

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

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

随机推荐

热门专题