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

随机推荐

2019js面试题前端必问点小视频
其实市面上的面试题有很多,但是大部分都是总结的blog居多,有时候说明一个事物也许口述几分钟就可以搞定,但是看帖子可能要分析半天所以我就出一部分前端js必考的小视频,不管我们什么时候面试基本都绕不过 ...
3468-A Simple Problem with Integers 线段树（区间增减，区间求和）
A Simple Problem with Integers Time Limit: 5000MS Memory Limit: 131072K Total Submissions: 110077 ...
用mapreduce读取hdfs数据到hbase上
hdfs数据到hbase过程将HDFS上的文件中的数据导入到hbase中实现上面的需求也有两种办法,一种是自定义mr,一种是使用hbase提供好的import工具 hbase先创建好表 cre ...
MyEclipse - 问题集 - Java compiler level does not match the version of the installed Java project facet
右键项目“Properties”,在弹出的“Properties”窗口左侧,单击“Project Facets”,打开“Project Facets”页面. 在页面中的“Java”下拉列表中,选择相应 ...
mysql 大数据分页查询优化
应用场景: 当有一张表的数据非常大,需要使用到分页查询,分页查询在100w条后查询效率非常低: 解决方案: 1.业务层解决:只允许用户翻页一百页以内,十条一页: 2.使用where id > 5 ...
『JavaScript』封装
封装可以被定义为对对象的内部数据表现形式和实现细节进行隐藏.通过封装可以强制实施信息隐藏. 在JavaScript中,并没有显示的声明私有成员的关键字等.所以要想实现封装/信息隐藏就需要从另外的思路出 ...
C#调用C++编写的dll
界面还是C#写的方便点,主要是有一个可视化的编辑器,不想画太多的时间在界面上.但是自己又对C++了解的多一些,所以在需要一个良好的界面的情况下,使用C++来写代码逻辑,将其编译成一个dll,然后用C# ...
join ,left join ,right join有什么区别
join等价于inner join内连接,是返回两个表中都有的符合条件的行. left join左连接,是返回左表中所有的行及右表中符合条件的行.(左表为主表) right join右连接,是返回右表 ...
第二十篇 sys模块
修改环境变量 import sys sys.path.append() 但是,这种修复方式只是临时修改如果要永久修改,就要电脑里配置环境变量. sys.argv:命令行参数List,第一个元素是程序 ...
hdu5863 cjj's string game
矩阵快速幂 #include<bits/stdc++.h> using namespace std; const int INF = 0x3f3f3f3f; const int MOD = ...

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

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

随机推荐

热门专题