新手帮助当前位置:风暴娱乐 > 新手帮助 > >

Mootools 1.2教程 定时器和哈希简介

  

[Mootools,定时器,哈希]Mootools 1.2教程 定时器和哈希简介

  定时器能比它表面看起来做更多的事情——定时能定期地触发一个函数。另一方面,hash则是键值对(key/value)的集合。如果你对hash还不熟悉现在也不要着急——我们今天就会做一个快速简要的介绍,并且会提供一些延伸阅读的相关链接。就像MooTools中的所有东西一样,一旦你看到它的正确用法,它使用起来就非常的简单,并且不可思议的有用。

  
.periodical()函数  
基本用法  
使用这个方法你唯一要做的就是在一个函数的结尾添加.periodical();,那样你的函数就会定时地触发。和以前的一样,有几个东西你是需要定义的。对于初学者,你需要定义一个你需要使用定时器的函数,还有你需要它多久触发一次(以毫秒为单位)。

  
参考代码:  
代码如下:

  
var periodicalFunction = function(){  
alert('again');  
}  
window.addEvent('domready', function() {  
// 结尾的数字决定了这个函数触发的时间间隔,以毫秒为单位  
var periodicalFunctionVar = periodicalFunction.periodical(100);  
});  
  
内置的.bind()方法  
.periodical()方法包含了一个非常好的特性——它可以自动地绑定第二个参数。举个例子,如果你想从domready的外面传递一个参数,你只需要把它作为第二个参数传进去,你就可以把它绑定到你要定期触发的函数上了。

  
参考代码:  
代码如下:

  
window.addEvent('domready', function() {  
// 给一个变量赋值  
var passedVar = $('elementID');  
// 现在periodicalFunction就可以使用"this"来引用"passedVar"  
var periodicalFunctionVar = periodicalFunction.periodical(100, passedVar);  
});  
  
停止一个定时触发的函数  
$clear()  
一旦你初始化了一个定时触发的函数(就像我们上面所做的那样),如果你想停止它,你可以使用$clear();方法,它使用起来非常简单:  
参考代码: [] [保存代码]  
// 我们传递那个我们使用了定时器函数的定时器变量  
$clear(periodicalFunctionVar);  
  
代码示例  
为把这所有的连贯起来,我们就用我们目前学过的一些东西(也有一些是没有学过的)来创建一个定时器。首先,建立一个定时器的HTML页面,我们还需要一个开始按钮,一个停止按钮,还有一个重置按钮。另外,我们还要创建一个条形块,它可以随着时间慢慢变长。最后,我们还需要一个地方来显示当前已经运行的时间。

  
参考代码:  
代码如下:

  
  
  
  
  
  
  
0
  
  
现在该是MooTools的代码了:  
参考代码:  
代码如下:
  
var timerFunction = function(){  
// 每次当这个函数被调用时  
// 变量currentTime就会增加一  
// 同时要注意一下"this.counter"的使用  
// "this"是hash  
// 而"counter"是key  
var currentTime = this.counter++;  
// 这里我们改变显示时间的div里面的内容  
$('timer_display').set('text', currentTime);  
// 这里改变样式表的width属性,可以轻松地创建一个时间进度条  
$('timer_bar').setStyle('width', currentTime);  
}  
window.addEvent('domready', function() {  
// 这是一个简单的hash对象  
// 只有一个键值对(key/value pair)  
var currentCounter = new Hash({counter: 0});  
// 我们初始化我们的定时器并传入和绑定hash变量  
var simpleTimer = timerFunction.periodical(100, currentCounter);  
// 由于我们不想在onload的时候就启动定时器  
// 因此我们在这里要停止这个定时器  
$clear(simpleTimer);  
// 在开始按钮上添加一个事件  
// 在这里再次启动这个定时器  
$('timer_start').addEvent("click", function(){  
simpleTimer = timerFunction.periodical(100, currentCounter);  
});  
// 在这里清除定时器  
// 并是时间条闪亮一下  
$('timer_stop').addEvent("click", function(){  
$clear(simpleTimer);  
$('timer_bar').highlight('#EFE02F');  
});  
$('timer_reset').addEvent("click", function(){  
// 重置按钮首先清除这个定时器  
$clear(simpleTimer);   (责任编辑:admin)

上一篇:JQuery使用$.ajax和checkbox实现下次不在通知功能

下一篇:没有了

推荐内容

  • 共3页:
  • 上一页
  • 1
  • 2
  • 3
  • 下一页
  • 客户服务热线

    010-400-12345

    在线客服