MooTools教程(14):定时器和Hash对象

作者佚名技术来源网页制作浏览发布时间 2012-03-07

// 我们传递那个我们使用了定时器函数的定时器变量
$clear(periodicalFunctionVar);

代码示例

为把这所有的连贯起来，我们就用我们目前学过的一些东西（也有一些是没有学过的）来创建一个定时器。首先，建立一个定时器的HTML页面，我们还需要一个开始按钮，一个停止按钮，还有一个重置按钮。另外，我们还要创建一个条形块，它可以随着时间慢慢变长。最后，我们还需要一个地方来显示当前已经运行的时间。

参考代码： [复制代码] [保存代码]

<button id="timer_start">start</button>
<button id="timer_stop">pause</button>
<button id="timer_reset">reset</button>
<div id="timper_bar_wrap">
<div id="timer_bar"> </div>
</div>
<div id="timer_display">0</div>

现在该是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);
// 然后把counter设为0
// 这个稍后再详细讲
currentCounter .set(''counter'', 0);
//
$(''timer_display'').set(''text'', currentCounter.counter);
$(''timer_bar'').setStyle(''width'', 0);
});
});

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!

分享到：更多

你可能对下面的文章感兴趣

上一篇: MooTools教程(12):Drag.Move来实现拖放下一篇: MooTools教程(15):滚动条(Slider)

关于MooTools教程(14):定时器和Hash对象的所有评论

随机推荐