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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了Mootools 1.2教程 定时器和哈希简介，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含6410字，纯文字阅读大概需要10分钟。

内容图文

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页面，我们还需要一个开始按钮，一个停止按钮，还有一个重置按钮。另外，我们还要创建一个条形块，它可以随着时间慢慢变长。最后，我们还需要一个地方来显示当前已经运行的时间。 
参考代码： 
 代码如下:

<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); 
}); 
}); 
 

Hash快速入门 
创建一个hash 
在上面的例子中，可能有一些东西是你从来没有见过的。首先，我们使用了hash。hash是一个由键值对（key/value）组成的集合，它和一个包含许多对象的数组类似，不过这些对象都只有一个属性。我们先来看一下如何建立一个hash： 
参考代码： 
 代码如下:

var hashVar = new Hash({ 
'firstKey': 0, 
'secondKey': 0 
}); 
 
你需要把键（key）放在左边，而值（value）放在右边（除了那些对hash很熟悉的人外，我们只讲一些关于hash最基本的东西，我们会在以后将类时再来讲hash的存储功能）。不管怎样，使用和这类似的系统还是又很多好处的。首先，你可以在一个对象中存储多个集合，存取变得容易得多，对于组织复杂的数据组织起来。 
.set()方法和.get()方法 
你也可以在hash中使用你熟悉的.set()和.get()方法。当你需要设置的时候，你声明一个键（key），然后是你要设置的值。当你需要获取的时候，你值需要声明你要获取的键（key）就行了。就这么简单。 
参考代码： 
 代码如下:

// 还是使用上面的hash 
// 这里我们设置firstKay的值为200 
hashVar.set('firstKey', 200); 
// 这里我们获取firstKey的值，现在是200 
var hashValue = hashVar.get('firstKey'); 
 
你可以可以通过引用hash.键名来获取一个值： 
参考代码： 
 代码如下:

var hashValue = hashVar.firstKey; 
// 上面的和下面的一样 
var hashValue = hashVar.get('firstKey'); 
 
添加一个新的键值对到hash中 
.extend();方法 
你可以通过.extend();方法来添加一个或者多个新的键值对（key/value pair）集合到hash中。首先，我们要创建一个新的键值对对象。 
参考代码： 
 代码如下:

// 这是一个普通的对象 
// 它包含键值对（key/value pairs） 
// 但是没有hash的功能 
var genericObject = { 
'third': 450, 
'fourth': 89 
}; 
 
如果我们要把这个集合加入到我们已经存在的hash中，我们只需要使用.extend();方法来扩展hash就行了： 
参考代码： 
 代码如下:

//现在hashVar包含了genericObject中的所有键值对 
hashVar.extend(genericObject); 
 
注意：任何重复的键都将会被后面的设置覆盖掉。因此，如果你在原始的hash中有"firstKey":"letterA"这样一对，然后你又扩展了一对"firstKey":"letterB"，这样你在hash中的读取结果将是"firstKey":"letterB"。 
合并两个hash 
.combine();方法 
这个方法可以让你合并两个hash对象，如果有重复的键将保留原始的值。其余的则和.extend()方法一样。 
从hash中删除一个键值对 
.erase();方法 
我们已经见过这个方法一次了。它的工作就和你期望的那样。你声明一个hash，然后在后面副加上.erase();，最后你再把“键”（key）放在括号里面。 
参考代码： 
 代码如下:

hashVar.erase('firstKey'); 
 
hash和.each()方法 
hash和.each()方法又一种特别的关系，当你遍历一个hash的时候，遍历的函数将把“值”（value）作为第一个参数传递，而把“键”（key）作为第二个参数传递——这和你在数组上使用.each的时候一样，它把每个“项”（item）作为第一个参数。 
参考代码： 
 代码如下:

hashVar.each(function(value, key) { 
// 这将为hash中的每一个键值对弹出一个对话框 
alert(key + ":" + value); 
}); 


更多学习


我们目前为止要讲的关于hash的内容就这么多了。由于这个系列教程中我们会更深入的学习，在以后我们将找一些机会来讲有关hash的更多功能。但是现在，如果你是初学者，我们只是希望你能对hash有一个基本的概念。很快我们就要讲解类（class）了，那个时候所有的东西才会串连起来。同时，阅读一下文档中有关hash的这一节。
下载一个包含你开始所需要的所有东西的zip包

包括MooTools 1.2的核心库，上面的示例，一个外部的JavaScript文件，一个简单的HTML页面和一个CSS文件。
            
            


           
                
                                                

内容总结

以上是互联网集市为您收集整理的Mootools 1.2教程 定时器和哈希简介全部内容，希望文章能够帮你解决Mootools 1.2教程 定时器和哈希简介所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端