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

定时器能比它表面看起来做更多的事情——定时能定期地触发一个函数。另一方面,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页面,我们还需要一个开始按钮,一个停止按钮,还有一个重置按钮。另外,我们还要创建一个条形块,它可以随着时间慢慢变长。最后,我们还需要一个地方来显示当前已经运行的时间。
参考代码:

复制代码 代码如下:

<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文件。

时间: 2024-09-24 21:05:41

Mootools 1.2教程 定时器和哈希简介_Mootools的相关文章

Mootools 1.2教程 排序类和方法简介_Mootools

Sortables类还提供了包括一个名叫"serialize"的优秀方法,通过这个方法你额可以把这些元素的id作为数组输出--对于服务器端的开发非常有用.接下来,我们看看如何创建一个新的排序项集合,还有一定要看一下最后的演示实例. 基本知识 创建一个新的Sortable对象 首先,我们要把我们要排序的元素赋值给变量.对于Sortables来说,如果你想要多个列表之间的元素能够在相互之间拖拽,你需要把这些元素全部都放在一个数组中,就像这样: 参考代码: 复制代码 代码如下: var so

Mootools 1.2教程 选项卡效果(Tabs)_Mootools

简单的"额外信息"标签(TAB) 鼠标移上去显示内容的TAB 在这第一个项目中,我们要创建一个简单的菜单,当鼠标移动到这些菜单上时显示相应的内容.首先,我们来完成HTML代码--我们就用包含四个列表项的ul好了,然后再创建四个div(每一个div对应一个列表项): 参考代码: 复制代码 代码如下: // 这里是我们的菜单 <ul id="tabs"> <li id="one">One</li> <li i

Mootools 1.2教程 滑动效果(Slide)_Mootools

基本用法 就像我们前面看过的所有类一样,我们在把这个类应用到一个元素上面时,我们要做的第一件事就是初始化一个新的Fx.Slide实例. 首先,让我们为滑动元素建立一个HTML文件. 参考代码: 复制代码 代码如下: <div id="slide_element" class="slide">这里是要滑动显示的内容.</div> 我们的CSS也不需要任何修饰. 参考代码: 复制代码 代码如下: .slide { margin: 20px 0;

Mootools 1.2教程(21)——类(二)_Mootools

Fdream注:原文好像少了一部分,因此我自作主张地补充了下面这一段及BaseClass的代码. 在今天的教程中,我们将主要学习一下MooTools中类的实现和继承(扩展).通过实现和继承,我们可以在子类中使用父类的方法,而不需要再重新声明和实现相同的方法.MooTools中的Class类可以帮助我们轻松地做到这一点.首先,我们定一个基类(base class). 参考代码: 复制代码 代码如下: var BaseClass = new Class({ // 定义一个方法testFunction

Mootools 1.2教程(2) DOM选择器_Mootools

如果你还没有准备好,请先阅读上一篇<Mootools 1.2教程(1)--MooTools介绍>.我们讲了怎么引用MooTools 1.2以及怎么在domready里面调用你的脚本. 今天开始本系列教程的第2讲.在这一讲中,我们会学习几种选择HTML元素的方法.在许多方面,这是MooTools用得最多最基本的.毕竟,要创建一个基于HTML元素的交互性用户体验,你必须首先把它们掌握在手中. 基本的方法 $(); $函数是MooTools中基本的选择器.你可以通过它来根据一个ID选择DOM元素.

Mootools 1.2教程 事件处理_Mootools

今天我们开始第五讲,在上一讲(<Mootools 1.2教程(4)--函数>)中,我们学习了在MooTools 1.2中建立和使用函数的几种不同方式.下一步就是理解事件了.和选择器类似,事件也是建立互动界面的一个重要部分.一旦你掌握了一个元素,你需要去决定什么行为来触发什么效果.先把效果留着以后在讲,我们首先看一看中间步骤和一些常见的事件. 左键单击事件 左键单击事件是web开发中最常见的事件.超链接识别点击事件,然后把你带到另外一个URL地址.MooTools能够识别其他DOM元素上的点击事

ArcGIS for Desktop入门教程_第二章_Desktop简介 - ArcGIS知乎-新一代ArcGIS问答社区

原文:ArcGIS for Desktop入门教程_第二章_Desktop简介 - ArcGIS知乎-新一代ArcGIS问答社区 1 Desktop简介1.1 ArcGIS for Desktop ArcGIS for Desktop是ArcGIS产品线上的桌面端软件产品,为GIS专业人士提供的信息制作和使用的工具.利用ArcGIS for Desktop,你可以实现任何从简单到复杂的GIS任务,包括制图,地理分析,数据编辑,数据管理,可视化和空间处理等.它可以作为三个独立的软件产品购买,每个产

利用maven与testng来进行测试Maven2 基础教程(3) - pom.xml 文件简介

Maven2 基础教程(3) - pom.xml 文件简介目标 本文用以说明如何修改maven2的主要配置文件pom.xml在适应我们的项目需要,通过本文您可以了解到 如何设定编译参数 设定编译环境为UTF-8编码 添加依赖项 添加TestNG框架支持 pom.xml 简介 如下是一个最基础的pom.xml <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/20

asp教程:ASP Session 对象简单简介

asp教程:ASP Session 对象简单简介 Session对象是用来储存的信息,或更改设置的一个用户会议.变量存储在Session对象举办资讯单一用户,并提供给所有的网页在一个应用程序. 下面来看一个简单的实例吧.  <html> <body> <%  response.write("<p>") response.write("The default LCID for this page is: " & Ses