第一页 上页 6 7 8 9 10 11 12 13 14 15 下页 最后页 [ 显示模式: 摘要 | 列表 ]

局部变量

[不指定 2015/09/18 13:02 | by 刘新修 ]
JavaScript代码
  1. var public=(function(){  
  2.     return {  
  3.         loadFlg: 0,  
  4.         hasUserIconFun:function(){  
  5.           console.log("test");
  6.         }  
  7.     }  
  8. })();  

A. 学习Javascript闭包(Closure)

闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现。

下面就是我的学习笔记,对于Javascript初学者应该是很有用的。

第一、变量的作用域

要理解闭包,首先必须理解Javascript特殊的变量作用域。

变量的作用域无非就是两种:全局变量和局部变量。

Javascript语言的特殊之处,就在于函数内部可以直接读取全局变量。

JavaScript代码
  1. var n=999;  
  2. function f1(){  
  3.   alert(n);  
  4. }  
  5. f1(); //999  

另一方面,在函数外部自然无法读取函数内的局部变量。

JavaScript代码
  1. function f1(){  
  2.   var n=999;  
  3. }  
  4. alert(n); //error  

这里有一个地方需要注意,函数内部声明变量的时候,一定要使用var命令。如果不用的话,你实际上声明了一个全局变量!

JavaScript代码
  1. function f1(){  
  2.   n=999;  
  3. }  
  4. f1();  
  5. alert(n); //999  

第二、如何从外部读取局部变量?

出于种种原因,我们有时候需要得到函数内的局部变量。但是,前面已经说过了,正常情况下,这是办不到的,只有通过变通方法才能实现。

 

那就是在函数的内部,再定义一个函数。

JavaScript代码
  1. function f1(){  
  2.   var n=999;  
  3.   function f2(){  
  4.     alert(n); // 999  
  5.   }  
  6. }  
在上面的代码中,函数f2就被包括在函数f1内部,这时f1内部的所有局部变量,对f2都是可见的。但是反过来就不行,f2内部的局部变量,对f1就是不可见的。这就是Javascript语言特有的"链式作用域"结构(chain scope),子对象会一级一级地向上寻找所有父对象的变量。所以,父对象的所有变量,对子对象都是可见的,反之则不成立。
既然f2可以读取f1中的局部变量,那么只要把f2作为返回值,我们不就可以在f1外部读取它的内部变量了吗!
 
JavaScript代码
  1. function f1(){  
  2.   var n=999;  
  3.   function f2(){  
  4.     alert(n);  
  5.   }  
  6.   return f2; //特别注意不要写成 return f2(); !!  
  7. }  
  8. var result=f1();  
  9. result(); //999  
三、闭包的概念
上一节代码中的f2函数,就是闭包。
各种专业文献上的"闭包"(closure)定义非常抽象,很难看懂。我的理解是,闭包就是能够读取其他函数内部变量的函数。
由于在Javascript语言中,只有函数内部的子函数才能读取局部变量,因此可以把闭包简单理解成"定义在一个函数内部的函数"。
所以,在本质上,闭包就是将函数内部和函数外部连接起来的一座桥梁。
 
B. 关于JS闭包调用、闭包取值的常见例子
 
只是一个通俗易懂的总结,希望对大家理解JS闭包有所帮助。
 
案例一:
 
JavaScript代码
  1. var b=20;  
  2. function aa(){  
  3.     //var b=10;   //如果子函数取不到就找window  
  4.     return function(){  
  5.         b++;  
  6.         console.log(b);  
  7.     }  
  8. };  
  9. aa()();  
  10.   
  11. function test(){  
  12.     return function(){alert("不作死就不会死!")}  
  13. };  
  14. test()();  
// test()();  第一个括号执行test函数返回子函数,第二个括号执行test返回的函数
 
备注:为什么后边还要加一个括号?以前我直接test()这样调用,但是没有弹出结果,也没有保存,注意一定要之后在加括号,否则不会返回子函数的内容!
 
JavaScript代码
  1. function a(){  
  2.     var i=0;  
  3.     function b(){  
  4.         console.log(++i);  
  5.     }  
  6.     return b;   //返回b函数本身的内容,不能写成 return b() 这样就直接执行了  
  7. }  
  8. a()();  
这段代码有两个特点:
1. 函数b嵌套在函数a的内部;
2. 函数a返回函数b的内容;
 
当调用执行: var c=a();c(); 实际上就创建了一个闭包,为什么呢?因为函数a外部变量引用了内部函数b,也就是说:
当函数a的内部函数b被a外部的变量引用时,就创建了一个闭包。
 
如果你不想用两个括号引用:a()(); 还有2种方法,如下:
 
1. 定义一个变量接受子函数的返回值,在执行变量所在函数 var c=a();c();
2. 让子函数自执行调用:
JavaScript代码
  1. function aa(){  
  2.     var x=10;  
  3.     (function bb(){  
  4.         x++;  
  5.         console.log(x);  
  6.     })();  
  7. };  
  8. console.log(aa());  
B.关于闭包中出现的this 深度剖析
 
1. 必须了解下作用域的概念,父级作用域的变量可以被子集作用域直接访问,如果子集作用域中没有找到变量,那么会顺着作用域链逐层上爬,直到找到为止。
2. 函数闭包和this没有直接的关系,只有对类用new创建实例对象时this才有意义,不用new的话,this就只是等于windows对象
 
JavaScript代码
  1. var name="The Windows";  
  2. var soho="The Soho";  
  3. var para="The Para";  
  4. var vars="The Vars";  
  5. function object(){  
  6.     this.name="My Object";  
  7.     //this.para="My Para";  //公共变量para先找this.para="My para" 如果没有定义就找window的The para  
  8.     this.soho="My Soho";  
  9.         this.getNameFunc=function(){  
  10.         //var soho="My GetNameSoho"; //先找当前定义的局部变量,如找不到就找上一层,都没有就找window 的变量  
  11.         console.log("soho2:"+soho+"  this.name2:"+this.name);  //soho2:My Soho  this.name2:My Object  
  12.         return function(){  
  13.             this.name="My NO-NameFunc";  
  14.             console.log("this.name3:"+this.name+"  this.vars3:"+this.vars); //this.name3:My NO-NameFunc  this.vars3:The Vars  
  15.             return this.name;  //My NO-NameFunc  
  16.         };  
  17.     }  
  18.     console.log("name1:"+name+"  this.name1:"+this.name+"  para:"+para);  //name1:My Object  this.name1:My Object  para:The Para  
  19.     return getNameFunc;  
  20. }  
  21.   
  22. //alert(object()()());  
  23. console.log(object()()());  
 

其实,this的取值,分四种情况。我们来挨个看一下。

 
在此再强调一遍一个非常重要的知识点:在函数中this到底取何值,是在函数真正被调用执行的时候确定的,函数定义的时候确定不了。因为this的取值是执行上下文环境的一部分,每次调用函数,都会产生一个新的执行上下文环境。
 
情况1:构造函数
 
所谓构造函数就是用来new对象的函数。其实严格来说,所有的函数都可以new一个对象,但是有些函数的定义是为了new一个对象,而有些函数则不是。另外注意,构造函数的函数名第一个字母大写(规则约定)。例如:Object、Array、Function等。
 
JavaScript代码
  1. function Foo(){  
  2.     this.name="刘新修";  
  3.     this.year=1986;  
  4.     console.log(this); //Foo {name: "刘新修", year: 1986}  
  5. }  
  6. var f1=new Foo();  
  7. console.log(f1.name); //刘新修  
  8. console.log(f1.year); //1986  
注意,以上仅限new Foo()的情况,即Foo函数作为构造函数的情况。如果直接调用Foo函数,而不是new Foo(),情况就大不一样了, 那就是普通函数调用了:
 
JavaScript代码
  1. function Foo(){  
  2.     this.name="刘新修";  
  3.     this.year=1986;  
  4.     console.log(this); //Window {top: Window, location: Location, document: document, window: Window, external: Object…}  
  5. }  
  6. Foo();  
这种情况下this就是window,个人总结:this就是就近原则,谁近就是谁,不然就是window,另外有关于闭包的两个demo同时也便于大家理解this 代码如下:
 
****************************************************************************************************************
代码片段一:
 
JavaScript代码
  1. var name="The Window";  
  2. var object={  
  3.   name:"My Object",  
  4.   getNameFunc:function(){  
  5.     return function(){  
  6.       return this.name;  
  7.     };  
  8.   }  
  9. };  
  10. alert(object.getNameFunc()()); //返回The Window  
代码片段二:
 
JavaScript代码
  1. var name="The Window";  
  2. var object={  
  3.   name:"My Object",  
  4.   getNameFunc:function(){  
  5.     var that=this;  
  6.     return function(){  
  7.       return that.name;  
  8.     };  
  9.   }  
  10. };  
  11. //alert(object.getNameFunc()()); //返回My Object 注:因为var that=this; 声明的为私有变量  
  12. console.log((object.getNameFunc()())); //返回My Object 注:因为var that=this; 声明的为私有变量  
**********************************************************************************************************************
 
情况2:函数作为对象的一个属性
 
如果函数作为对象的一个属性时,并且作为对象的一个属性被调用时,函数中的this指向该对象。
JavaScript代码
  1. var obj={  
  2.     x:10,  
  3.     fn:function(){  
  4.         console.log(this);   //object {fu:function,x:10}  
  5.         console.log(this.x); //10  
  6.     }  
  7. };  
  8. obj.fn();  
以上代码中,fn不仅作为一个对象的一个属性,而且的确是作为对象的一个属性被调用。结果this就是obj对象。
注意,如果fn函数不作为obj的一个属性被调用,会是什么结果呢?
 
 
JavaScript代码
  1. var obj={  
  2.     x:10,  
  3.     fn:function(){  
  4.         console.log(this);   //Window {top: Window, location: Location, document: document, window: Window, external: Object…}  
  5.         console.log(this.x); //如果this是window那this.x 自然就是 undefined  
  6.     }  
  7. };  
  8. var fn1=obj.fn;  
  9. fn1();  
情况3:函数用call或者apply调用
 
当一个函数被call和apply调用时,this的值就取传入的对象的值。至于call和apply如何使用,不会的朋友可以去查查其他资料,本系列教程不做讲解。
 
JavaScript代码
  1. var obj={  
  2.     x:10  
  3. };  
  4. var fn=function(){  
  5.     console.log(this);   //Object {x: 10}  
  6.     console.log(this.x); //10  
  7. };  
  8. fn.call(obj);  
情况4:全局 & 调用普通函数
 
在全局环境下,this永远是window,这个应该没有非议。
 
JavaScript代码
  1. console.log(this===window); //true  
普通函数在调用时,其中的this全部都指向window 如下:
 
JavaScript代码
  1. var x=10;  
  2. var fn=function(){  
  3.     console.log(this);   //window  
  4.     console.log(this.x); //10  
  5. };  
  6. fn();  
以上代码很好理解,如果函数里套子函数this仍然指向window 如下:
 
JavaScript代码
  1. var x=10;  
  2. var obj={  
  3.     x:10,  
  4.     fn:function(){  
  5.         function f(){  
  6.             console.log(this);   //window  
  7.             console.log(this.x); //10  
  8.         };  
  9.         f();  
  10.     }  
  11. };  
  12. obj.fn();  
除非用局部变量 var that=this; 重新定义this 这时候的that 变量只能在函数内部调用,如下:
 
JavaScript代码
  1. var name="The Window";  
  2. var object={  
  3.   name:"My Object",  
  4.   getNameFunc:function(){  
  5.     var that=this;  
  6.     console.log(that);      //Object {name: "My Object"}  
  7.     console.log(this.name); //My Object  
  8.   }  
  9. };  
  10. object.getNameFunc();  
 

javascript和其他编程语言相比比较随意,所以javascript代码中充满各种奇葩的写法,有时雾里看花,当然,能理解各型各色的写法也是对javascript语言特性更进一步的深入理解。

 
( function(){…} )()和( function (){…} () )是两种javascript立即执行函数的常见写法,最初我以为是一个括号包裹匿名函数,再在后面加个括号调用函数,最后达到函数定义后立即执行的目的,后来发现加括号的原因并非如此。要理解立即执行函数,需要先理解一些函数的基本概念。
 
函数声明、函数表达式、匿名函数
 
函数声明:function fnName () {…};使用function关键字声明一个函数,再指定一个函数名,叫函数声明。
 
函数表达式 var fnName = function () {…};使用function关键字声明一个函数,但未给函数命名,最后将匿名函数赋予一个变量,叫函数表达式,这是最常见的函数表达式语法形式。
 
匿名函数:function () {}; 使用function关键字声明一个函数,但未给函数命名,所以叫匿名函数,匿名函数属于函数表达式,匿名函数有很多作用,赋予一个变量则创建函数,赋予一个事件则成为事件处理程序或创建闭包等等。
 
函数声明和函数表达式不同之处在于,一、Javascript引擎在解析javascript代码时会‘函数声明提升’(Function declaration Hoisting)当前执行环境(作用域)上的函数声明,而函数表达式必须等到Javascirtp引擎执行到它所在行时,才会从上而下一行一行地解析函数表达式,二、函数表达式后面可以加括号立即调用该函数,函数声明不可以,只能以fnName()形式调用 。以下是两者差别的两个例子。
JavaScript代码
  1. fnName();  
  2. function fnName(){  
  3.     ...  
  4. }  
  5. //正常,因为‘提升’了函数声明,函数调用可在函数声明之前  
  6.   
  7. fnName();  
  8. var fnName=function(){  
  9.     ...  
  10. }  
  11. //报错,变量fnName还未保存对函数的引用,函数调用必须在函数表达式之后  
  12.   
  13. var fnName=function(){  
  14.     alert('Hello World');  
  15. }();  
  16. //函数表达式后面加括号,当javascript引擎解析到此处时能立即调用函数  
  17. function fnName(){  
  18.     alert('Hello World');  
  19. }();  
  20. //不会报错,但是javascript引擎只解析函数声明,忽略后面的括号,函数声明不会被调用  
  21. function(){  
  22.     console.log('Hello World');      
  23. }();  
  24. //语法错误,虽然匿名函数属于函数表达式,但是未进行赋值操作,  
  25. //所以javascript引擎将开头的function关键字当做函数声明,报错:要求需要一个函数名  
在理解了一些函数基本概念后,回头看看( function(){…} )()和( function (){…} () )这两种立即执行函数的写法,最初我以为是一个括号包裹匿名函数,并后面加个括号立即调用函数,当时不知道为什么要加括号,后来明白,要在函数体后面加括号就能立即调用,则这个函数必须是函数表达式,不能是函数声明。
JavaScript代码
  1. (function(a){  
  2.     console.log(a);   //firebug输出123,使用()运算符  
  3. })(123);  
  4.   
  5. (function(a){  
  6.     console.log(a);   //firebug输出1234,使用()运算符  
  7. }(1234));  
  8.   
  9. !function(a){  
  10.     console.log(a);   //firebug输出12345,使用!运算符  
  11. }(12345);  
  12.   
  13. +function(a){  
  14.     console.log(a);   //firebug输出123456,使用+运算符  
  15. }(123456);  
  16.   
  17. -function(a){  
  18.     console.log(a);   //firebug输出1234567,使用-运算符  
  19. }(1234567);  
  20.   
  21. var fn=function(a){  
  22.     console.log(a);   //firebug输出12345678,使用=运算符  
  23. }(12345678)  
可以看到输出结果,在function前面加!、+、 -甚至是逗号等到都可以起到函数定义后立即执行的效果,而()、!、+、-、=等运算符,都将函数声明转换成函数表达式,消除了javascript引擎识别函数表达式和函数声明的歧义,告诉javascript引擎这是一个函数表达式,不是函数声明,可以在后面加括号,并立即执行函数的代码。
 
加括号是最安全的做法,因为!、+、-等运算符还会和函数的返回值进行运算,有时造成不必要的麻烦。
 
不过这样的写法有什么用呢?
 
javascript中没用私有作用域的概念,如果在多人开发的项目上,你在全局或局部作用域中声明了一些变量,可能会被其他人不小心用同名的变量给覆盖掉,根据javascript函数作用域链的特性,可以使用这种技术可以模仿一个私有作用域,用匿名函数作为一个“容器”,“容器”内部可以访问外部的变量,而外部环境不能访问“容器”内部的变量,所以( function(){…} )()内部定义的变量不会和外部的变量发生冲突,俗称“匿名包裹器”或“命名空间”。
 
JQuery使用的就是这种方法,将JQuery代码包裹在( function (window,undefined){…jquery代码…} (window)中,在全局作用域中调用JQuery代码时,可以达到保护JQuery内部变量的作用。
C#代码
  1. rm -rf /www/youyuan.com.1/htdocs/xfile  
  2. sudo ln -s /opt/xfile /www/youyuan.com.1/htdocs/xfile  

 熟悉js的朋友很多都遇到过js的数组与字符串相互转换的情况,本文就此作一简单介绍,示例如下:

一、数组转字符串

需要将数组元素用某个字符连接成字符串,示例代码如下:

1
2
3
var a, b;
a = new Array(0,1,2,3,4);
b = a.join("-");

二、字符串转数组

实现方法为将字符串按某个字符切割成若干个字符串,并以数组形式返回,示例代码如下:

1
2
var s = "abc,abcd,aaa";
ss = s.split(",");// 在每个逗号(,)处进行分解。

抽奖首页代码

[不指定 2015/07/30 16:39 | by 刘新修 ]

 

XML/HTML代码
  1. <!doctype html>  
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8">  
  5. <link rel="dns-prefetch" href="//hd.youyuan.com">  
  6. <link rel="dns-prefetch" href="//x.youyuan.com">  
  7. <link rel="dns-prefetch" href="//f1.youyuan.com">  
  8. <link rel="dns-prefetch" href="//f2.youyuan.com">  
  9. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />  
  10. <meta content="yes" name="apple-mobile-web-app-capable" />  
  11. <meta content="black" name="apple-mobile-web-app-status-bar-style" />  
  12. <meta content="telephone=no" name="format-detection" />  
  13. <title>抽奖结果</title>  
  14. <link href="css/love-qixi.css" rel="stylesheet" type="text/css" />  
  15. <style>  
  16. .ele{ background:url(images/selected.png); display:none}  
  17. .lotteryBox{ width:96%; margin:0 auto;}  
  18. .lotteryBox .lottery{ width:290px; height:290px; margin:0 auto; background:url(images/lottery.png) no-repeat; background-size:100%; position:relative; z-index:101;}  
  19. .lotteryBox .lottery .prize_{ width:25%; height:25%; position:absolute; z-index:102;}  
  20. .lotteryBox .lottery .prize_1{ left:0; top:0;}  
  21. .lotteryBox .lottery .prize_2{ left:25%; top:0;}  
  22. .lotteryBox .lottery .prize_3{ left:50%; top:0;}  
  23. .lotteryBox .lottery .prize_4{ left:75%; top:0;}  
  24. .lotteryBox .lottery .prize_5{ left:75%; top:25%;}  
  25. .lotteryBox .lottery .prize_6{ left:75%; top:50%;}  
  26. .lotteryBox .lottery .prize_7{ left:75%; top:75%;}  
  27. .lotteryBox .lottery .prize_8{ left:50%; top:75%;}  
  28. .lotteryBox .lottery .prize_9{ left:25%; top:75%;}  
  29. .lotteryBox .lottery .prize_10{ left:0%; top:75%;}  
  30. .lotteryBox .lottery .prize_11{ left:0%; top:50%;}  
  31. .lotteryBox .lottery .prize_12{ left:0%; top:25%;}  
  32. .lotteryBox .lottery .selected{ background-image:url(images/selected.png); background-repeat: no-repeat; background-size:90%;}  
  33. .lotteryBox .lottery .prize_1.selected{ background-position: 20% 30%;}  
  34. .lotteryBox .lottery .prize_2.selected{ background-position: 36% 30%;}  
  35. .lotteryBox .lottery .prize_3.selected{ background-position: 40% 30%;}  
  36. .lotteryBox .lottery .prize_4.selected{ background-position: 60% 30%;}  
  37. .lotteryBox .lottery .prize_5.selected{ background-position: 60% 35%;}  
  38. .lotteryBox .lottery .prize_6.selected{ background-position: 60% 35%;}  
  39. .lotteryBox .lottery .prize_7.selected{ background-position: 60% 50%;}  
  40. .lotteryBox .lottery .prize_8.selected{ background-position: 60% 50%;}  
  41. .lotteryBox .lottery .prize_9.selected{ background-position: 36% 50%;}  
  42. .lotteryBox .lottery .prize_10.selected{ background-position: 20% 50%;}  
  43. .lotteryBox .lottery .prize_11.selected{ background-position: 20% 35%;}  
  44. .lotteryBox .lottery .prize_12.selected{ background-position: 20% 35%;}  
  45.   
  46. </style>  
  47. </head>  
  48. <body>  
  49. <div class="top_blank"></div>  
  50. <nav class="nav">  
  51.     <h2 class="pink">抽奖结果</h2>  
  52.     <div class="left" onClick="history.go(-1)"> <i class="le_trg"></i></div>  
  53.     <div class="right"><!-- <span id="search_sure" class="seach_sure">确定</span>--> </div>  
  54. </nav>  
  55. <div class="ele"></div>  
  56. <div class="blank10"></div>  
  57. <div class="lotteryBox">  
  58. <div class="lottery">  
  59. <div class="prize_ prize_1"></div>  
  60. <div class="prize_ prize_2"></div>  
  61. <div class="prize_ prize_3"></div>  
  62. <div class="prize_ prize_4"></div>  
  63. <div class="prize_ prize_5"></div>  
  64. <div class="prize_ prize_6"></div>  
  65. <div class="prize_ prize_7"></div>  
  66. <div class="prize_ prize_8"></div>  
  67. <div class="prize_ prize_9"></div>  
  68. <div class="prize_ prize_10"></div>  
  69. <div class="prize_ prize_11"></div>  
  70. <div class="prize_ prize_12"></div>  
  71. </div>  
  72. <div class="blank10"></div>  
  73. <div class="upload-btn send-out start_" usable="false">开始抽奖</div>  
  74. </div><!-- lotteryBox -->  
  75. </body>  
  76. <script type="text/javascript" src="//f1.youyuan.com/xfile/www/js/??public/lib/zepto/zepto-1.1.6.js,public/m/ajax-min.js"></script>  
  77. <script type="text/javascript" src="js/all.js"></script>  
  78. <script type="text/javascript">  
  79. var lottery={  
  80.     beginning:-1,   //从哪个位置【起点】  
  81.     prizeNum:-1,    //到哪个位置【终点】  
  82.     countNum:0,     //循环DOM总共有多少个  
  83.     bufferNum:60,   //转动基本次数:至少转动60次之后才可以停顿  
  84.     timer:0,        //setTimeout的ID,用clearTimeout清除  
  85.     speed:20,       //循环DOM转动的速度  
  86.     times:0,        //向前走过的个数每次+1  
  87.     shared:0,  
  88.     cNum:0,  
  89.     beginFun:function(){  
  90.         lottery.times+=1;  
  91.         var NTT=lottery.times;  
  92.         var datanum=lottery.times;  
  93.         var dataccc=Math.ceil(datanum/2)-1;  
  94.         if(datanum%2==0){  
  95.             $(".game_").addClass("game_on");  
  96.         }  
  97.         else if(datanum%2!=0){  
  98.             $(".game_").removeClass("game_on");  
  99.         }  
  100.         lottery.rollFun();  
  101.         if (lottery.times>lottery.bufferNum&&lottery.prizeNum==lottery.beginning){  
  102.               
  103.             if(lottery.prizeNum==0){  
  104.                 //alert("恭喜您,中了第5个奖品")  
  105.                   
  106.             }else if(lottery.prizeNum==1){  
  107.                 //alert("恭喜您,中了第5个奖品")  
  108.                   
  109.             }else if(lottery.prizeNum==2){  
  110.                 //alert("恭喜您,中了第5个奖品")  
  111.       
  112.             }else if(lottery.prizeNum==3){  
  113.                 //alert("恭喜您,中了第5个奖品")  
  114.                   
  115.             }else if(lottery.prizeNum==4){  
  116.                 //alert("恭喜您,中了第5个奖品")  
  117.                   
  118.             }else if(lottery.prizeNum==5){  
  119.                 //alert("恭喜您,中了第5个奖品")  
  120.                   
  121.             }else if(lottery.prizeNum==5&&lottery.shared==0&&lottery.cNum==0){  
  122.                 //alert("恭喜您,中了第5个奖品")  
  123.                   
  124.             }else if(lottery.prizeNum==6){  
  125.                 //alert("恭喜您,中了第5个奖品")  
  126.   
  127.             }else if(lottery.prizeNum==7){  
  128.                 //alert("恭喜您,中了第5个奖品")  
  129.             }  
  130.       
  131.             clearTimeout(lottery.timer);  
  132.             lottery.prizeNum=-1;  
  133.             lottery.times=0;  
  134.             click=false;  
  135.         }else{  
  136.             if (lottery.times<lottery.bufferNum) {  
  137.                 lottery.speed-=10;  
  138.             }else if(lottery.times==lottery.bufferNum) {  
  139.                 //var beginning = Math.random()*(lottery.countNum)|0;  
  140.                 //lottery.prizeNum = 3;      
  141.             }else{  
  142.                 if (lottery.times>lottery.bufferNum&&((lottery.prizeNum==0&&lottery.beginning==7)||lottery.prizeNum==lottery.beginning+1)){  
  143.                     lottery.speed+=110;  
  144.                 }else{  
  145.                     lottery.speed+=20;  
  146.                 }  
  147.             }  
  148.             if (lottery.speed<40) {  
  149.                 lottery.speed=40;  
  150.             };  
  151.             //console.log(lottery.times+'^^^^^^'+lottery.speed+'^^^^^^^'+lottery.prizeNum);  
  152.             lottery.timer=setTimeout(lottery.beginFun,lottery.speed);  
  153.         }  
  154.         return false;  
  155.     },  
  156.     initFun:function(className){  
  157.         //该模块主要是选择器,最后给起点加上CSS样式  
  158.         if ($("."+className).find(".prize_").length>0){  
  159.             $objD=$("."+className);  
  160.             $childNode=$objD.find(".prize_");  
  161.             this.obj=$objD;  
  162.             this.countNum=$childNode.length;  
  163.             $objD.find(".prize_"+this.index).addClass("selected");  
  164.         };  
  165.     },  
  166.     rollFun:function(){  
  167.         //该模块主要是步进值循环移除及添加,到终点后设置Index值为0  
  168.         var index=this.beginning;  
  169.         var count=this.countNum;  
  170.         var objD=this.obj;  
  171.         $(objD).find(".prize_"+index).removeClass("selected");  
  172.         index+=1;  
  173.         if (index>count){  
  174.             index=0;  
  175.         };  
  176.         $(objD).find(".prize_"+index).addClass("selected");  
  177.         this.beginning=index;  
  178.         return false;  
  179.     },  
  180.     stopFun:function(index){  
  181.         this.prizeNum=index;  
  182.         return false;  
  183.     }  
  184. };  
  185.   
  186. //获取整体的宽度并设置子节点宽度  
  187. var _lotteryBoxWidth=$(".lotteryBox").width();  
  188. $(".lottery").css({"width":_lotteryBoxWidth,"height":_lotteryBoxWidth});  
  189.   
  190.   
  191. //点击抽奖按钮调用公共方法  
  192. $(".start_").click(function(){  
  193. lottery.initFun('lottery');  
  194. lottery.prizeNum=5;  
  195. lottery.speed=100;  
  196. lottery.cNum=1;  
  197.   
  198. //开始抽奖执行方法  
  199. lottery.beginFun();  
  200.   
  201. });  
  202.   
  203.   
  204.   
  205. </script>  
  206. </html>  

 

 

XML/HTML代码
  1. <style>  
  2. #elUl{ border:1px #000 solid; position:absolute; right:10px; top:0;}  
  3. @-webkit-keyframes scro{from{top:0;}to{top:-30px;}}  
  4. </style>  
  5. <script type="text/javascript">  
  6. window.onload=function(){  
  7.     var elUl=document.getElementById("elUl");  
  8.     //alert(elUl)  
  9.     if(elUl!=null){  
  10.         setInterval(function(){   
  11.             elUl.style.WebkitAnimation='scro 0.5s linear forwards';  
  12.             elUl.style.MozAnimation="scro 0.5s linear forwards";  
  13.             elUl.style.msAnimation='scro 0.5s linear forwards';  
  14.             elUl.style.OAnimation='scro 0.5s linear forwards';  
  15.             elUl.style.animation='scro 0.5s linear forwards';  
  16.             //oUl.style.transform='translateY(-100px)';  
  17.             //oUl.addEventListener("webkitAnimationEnd",end);  
  18.             if(elUl.offsetTop<=-30){  
  19.                 elUl.style.WebkitAnimation='';  
  20.                 var b=elUl.children[0];  
  21.                 elUl.appendChild(b);  
  22.                 //clearInterval(timer)  
  23.             }             
  24.         },3000);  
  25.     }  
  26. }  
  27.   
  28. </script>  

注明:elUl.offsetTop 是检测DOM距离顶部的距离,如果符合条件自动清除CSS3动画,如果左右滚动Banner可以使用:elUl.offsetLeft

JS 事件委托

[不指定 2015/07/27 13:23 | by 刘新修 ]

 JS 事件委托

XML/HTML代码
  1. <!DOCTYPE HTML>  
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8" />  
  5. <title>js性能优化</title>  
  6. <style>  
  7. #list{ border:1px solid #000;}  
  8. </style>  
  9. </head>  
  10. <body id='list'>   
  11. <ul >  
  12. <li>精通css</li>  
  13. <li>精通js</li>  
  14. <li>精通html</li>  
  15. ......  
  16. </ul>  
  17. </body>  
  18. </html>   
  19. <script type="text/javascript">  
  20. (function(){  
  21. var a=document.getElementById('list');  
  22. a.addEventListener('click',function(e){  
  23. var b = e.target;   
  24. alert(b.innerHTML);  
  25. },false);  
  26. })();  
  27. </script>  

 

JavaScript代码
  1. var Expression = (function () {  
  2.     return {  
  3.         images: [{className:'face_1',text: '微笑'},  
  4.             {className:'face_2',text: '害羞'},  
  5.             {className:'face_3',text: '喜欢'},  
  6.             {className:'face_4',text: '快哭了'},  
  7.             {className:'face_5',text: '爱心'},  
  8.             {className:'face_6',text: '擦汗'},{className:'face_7',text: '愤怒'},  
  9.             {className:'face_8',text: '可爱'},{className:'face_9',text: '小可怜'},{className:'face_10',text: '尴尬'},{className:'face_11',text: '呲牙'},  
  10.             {className:'face_12',text: '红唇'},{className:'face_13',text: '难过'},{className:'face_14',text: '亲亲'},{className:'face_15',text: '委屈'},  
  11.             {className:'face_16',text: '疑惑'},{className:'face_17',text: '拥抱'},{className:'face_18',text: '再见'},{className:'face_19',text: '咖啡'},  
  12.             {className:'face_20',text: '礼物'},{className:'face_21',text: '玫瑰'}],  
  13.         initBox: function ($selector) {  
  14.             $.each(Expression.images, function () {  
  15.                 if(this.className=="face_1" || this.className=="face_11"){  
  16.                     return true;  
  17.                 }  
  18.                 var li = $('<li></li>').data('express'this.text).append('<i class="icon '+this.className +'"></i>');  
  19.                 $selector.append(li);  
  20.             });  
  21.         },  
  22.         replaceHtml: function ($selector) {  
  23.             var html = $selector.html();  
  24.             $.each(Expression.images, function () {  
  25.                 var re = new RegExp("\\["+this.text+"\\]","g");  
  26.                 html = html.replace(re, '<i class="icon ' + this.className + '"></i>');  
  27.             });  
  28.             $selector.html(html);  
  29.         }  
  30.     }  
  31.   
  32. })();  
  33. $(function () {  
  34.     $('body').on("tap"'[data-express]'function () {  
  35.         var txt = $(this).data('express'), text = $('textarea');  
  36.         text.val(text.val() + '[' + txt + ']');  
  37.         var len = text.val().length;  
  38.         $('#provide').text(len + "/240字");  
  39.         text.focus();  
  40.     });  
  41. });  
  42.   
  43. Expression.replaceHtml($('#chat_list'));  
  44. Expression.initBox($('#face'))  
第一页 上页 6 7 8 9 10 11 12 13 14 15 下页 最后页 [ 显示模式: 摘要 | 列表 ]