欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Mootools 1.2教程 定時器和哈希簡介

 更新時間:2009年09月15日 21:40:12   作者:  
在今天的教程中,我們將關(guān)注兩塊內(nèi)容:第一個就是.periodical();方法,然后我們再對hash做一個簡介。
定時器能比它表面看起來做更多的事情——定時能定期地觸發(fā)一個函數(shù)。另一方面,hash則是鍵值對(key/value)的集合。如果你對hash還不熟悉現(xiàn)在也不要著急——我們今天就會做一個快速簡要的介紹,并且會提供一些延伸閱讀的相關(guān)鏈接。就像MooTools中的所有東西一樣,一旦你看到它的正確用法,它使用起來就非常的簡單,并且不可思議的有用。
.periodical()函數(shù)
基本用法
使用這個方法你唯一要做的就是在一個函數(shù)的結(jié)尾添加.periodical();,那樣你的函數(shù)就會定時地觸發(fā)。和以前的一樣,有幾個東西你是需要定義的。對于初學(xué)者,你需要定義一個你需要使用定時器的函數(shù),還有你需要它多久觸發(fā)一次(以毫秒為單位)。
參考代碼:
復(fù)制代碼 代碼如下:

var periodicalFunction = function(){
alert('again');
}
window.addEvent('domready', function() {
// 結(jié)尾的數(shù)字決定了這個函數(shù)觸發(fā)的時間間隔,以毫秒為單位
var periodicalFunctionVar = periodicalFunction.periodical(100);
});

內(nèi)置的.bind()方法
.periodical()方法包含了一個非常好的特性——它可以自動地綁定第二個參數(shù)。舉個例子,如果你想從domready的外面?zhèn)鬟f一個參數(shù),你只需要把它作為第二個參數(shù)傳進(jìn)去,你就可以把它綁定到你要定期觸發(fā)的函數(shù)上了。
參考代碼:
復(fù)制代碼 代碼如下:

window.addEvent('domready', function() {
// 給一個變量賦值
var passedVar = $('elementID');
// 現(xiàn)在periodicalFunction就可以使用"this"來引用"passedVar"
var periodicalFunctionVar = periodicalFunction.periodical(100, passedVar);
});

停止一個定時觸發(fā)的函數(shù)
$clear()
一旦你初始化了一個定時觸發(fā)的函數(shù)(就像我們上面所做的那樣),如果你想停止它,你可以使用$clear();方法,它使用起來非常簡單:
參考代碼: [復(fù)制代碼] [保存代碼]
// 我們傳遞那個我們使用了定時器函數(shù)的定時器變量
$clear(periodicalFunctionVar);

代碼示例
為把這所有的連貫起來,我們就用我們目前學(xué)過的一些東西(也有一些是沒有學(xué)過的)來創(chuàng)建一個定時器。首先,建立一個定時器的HTML頁面,我們還需要一個開始按鈕,一個停止按鈕,還有一個重置按鈕。另外,我們還要創(chuàng)建一個條形塊,它可以隨著時間慢慢變長。最后,我們還需要一個地方來顯示當(dāng)前已經(jīng)運(yùn)行的時間。
參考代碼:
復(fù)制代碼 代碼如下:

<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>

現(xiàn)在該是MooTools的代碼了:
參考代碼:
復(fù)制代碼 代碼如下:

var timerFunction = function(){
// 每次當(dāng)這個函數(shù)被調(diào)用時
// 變量currentTime就會增加一
// 同時要注意一下"this.counter"的使用
// "this"是hash
// 而"counter"是key
var currentTime = this.counter++;
// 這里我們改變顯示時間的div里面的內(nèi)容
$('timer_display').set('text', currentTime);
// 這里改變樣式表的width屬性,可以輕松地創(chuàng)建一個時間進(jìn)度條
$('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設(shè)為0
// 這個稍后再詳細(xì)講
currentCounter .set('counter', 0);
//
$('timer_display').set('text', currentCounter.counter);
$('timer_bar').setStyle('width', 0);
});
});


Hash快速入門
創(chuàng)建一個hash
在上面的例子中,可能有一些東西是你從來沒有見過的。首先,我們使用了hash。hash是一個由鍵值對(key/value)組成的集合,它和一個包含許多對象的數(shù)組類似,不過這些對象都只有一個屬性。我們先來看一下如何建立一個hash:
參考代碼:
復(fù)制代碼 代碼如下:

var hashVar = new Hash({
'firstKey': 0,
'secondKey': 0
});

你需要把鍵(key)放在左邊,而值(value)放在右邊(除了那些對hash很熟悉的人外,我們只講一些關(guān)于hash最基本的東西,我們會在以后將類時再來講hash的存儲功能)。不管怎樣,使用和這類似的系統(tǒng)還是又很多好處的。首先,你可以在一個對象中存儲多個集合,存取變得容易得多,對于組織復(fù)雜的數(shù)據(jù)組織起來。
.set()方法和.get()方法
你也可以在hash中使用你熟悉的.set()和.get()方法。當(dāng)你需要設(shè)置的時候,你聲明一個鍵(key),然后是你要設(shè)置的值。當(dāng)你需要獲取的時候,你值需要聲明你要獲取的鍵(key)就行了。就這么簡單。
參考代碼:
復(fù)制代碼 代碼如下:

// 還是使用上面的hash
// 這里我們設(shè)置firstKay的值為200
hashVar.set('firstKey', 200);
// 這里我們獲取firstKey的值,現(xiàn)在是200
var hashValue = hashVar.get('firstKey');

你可以可以通過引用hash.鍵名來獲取一個值:
參考代碼:
復(fù)制代碼 代碼如下:

var hashValue = hashVar.firstKey;
// 上面的和下面的一樣
var hashValue = hashVar.get('firstKey');

添加一個新的鍵值對到hash中
.extend();方法
你可以通過.extend();方法來添加一個或者多個新的鍵值對(key/value pair)集合到hash中。首先,我們要創(chuàng)建一個新的鍵值對對象。
參考代碼:
復(fù)制代碼 代碼如下:

// 這是一個普通的對象
// 它包含鍵值對(key/value pairs)
// 但是沒有hash的功能
var genericObject = {
'third': 450,
'fourth': 89
};

如果我們要把這個集合加入到我們已經(jīng)存在的hash中,我們只需要使用.extend();方法來擴(kuò)展hash就行了:
參考代碼:
復(fù)制代碼 代碼如下:

//現(xiàn)在hashVar包含了genericObject中的所有鍵值對
hashVar.extend(genericObject);

注意:任何重復(fù)的鍵都將會被后面的設(shè)置覆蓋掉。因此,如果你在原始的hash中有"firstKey":"letterA"這樣一對,然后你又?jǐn)U展了一對"firstKey":"letterB",這樣你在hash中的讀取結(jié)果將是"firstKey":"letterB"。
合并兩個hash
.combine();方法
這個方法可以讓你合并兩個hash對象,如果有重復(fù)的鍵將保留原始的值。其余的則和.extend()方法一樣。
從hash中刪除一個鍵值對
.erase();方法
我們已經(jīng)見過這個方法一次了。它的工作就和你期望的那樣。你聲明一個hash,然后在后面副加上.erase();,最后你再把“鍵”(key)放在括號里面。
參考代碼:
復(fù)制代碼 代碼如下:

hashVar.erase('firstKey');

hash和.each()方法
hash和.each()方法又一種特別的關(guān)系,當(dāng)你遍歷一個hash的時候,遍歷的函數(shù)將把“值”(value)作為第一個參數(shù)傳遞,而把“鍵”(key)作為第二個參數(shù)傳遞——這和你在數(shù)組上使用.each的時候一樣,它把每個“項(xiàng)”(item)作為第一個參數(shù)。
參考代碼:
復(fù)制代碼 代碼如下:

hashVar.each(function(value, key) {
// 這將為hash中的每一個鍵值對彈出一個對話框
alert(key + ":" + value);
});

更多學(xué)習(xí)

我們目前為止要講的關(guān)于hash的內(nèi)容就這么多了。由于這個系列教程中我們會更深入的學(xué)習(xí),在以后我們將找一些機(jī)會來講有關(guān)hash的更多功能。但是現(xiàn)在,如果你是初學(xué)者,我們只是希望你能對hash有一個基本的概念。很快我們就要講解類(class)了,那個時候所有的東西才會串連起來。同時,閱讀一下文檔中有關(guān)hash的這一節(jié)。

下載一個包含你開始所需要的所有東西的zip包

包括MooTools 1.2的核心庫,上面的示例,一個外部的JavaScript文件,一個簡單的HTML頁面和一個CSS文件。

相關(guān)文章

  • Mootools 1.2教程 輸入過濾第一部分(數(shù)字)

    Mootools 1.2教程 輸入過濾第一部分(數(shù)字)

    今天我們來看看MooTools是怎樣使得過濾用戶輸入變得非常輕松。我們今天將講一些基本的數(shù)字過濾,明天再更深入地講講字符串過濾。
    2009-09-09
  • Mootools 1.2教程 選項(xiàng)卡效果(Tabs)

    Mootools 1.2教程 選項(xiàng)卡效果(Tabs)

    今天將不只是受限于這個庫和一些基本的編程知識,我們來做一個簡單的小項(xiàng)目。通過使用我們目前為止已經(jīng)學(xué)過的一些知識,有幾種方式來創(chuàng)建當(dāng)鼠標(biāo)移上去或者點(diǎn)擊時顯示相應(yīng)內(nèi)容的tab。
    2009-09-09
  • Mootools 1.2教程(3) 數(shù)組使用簡介

    Mootools 1.2教程(3) 數(shù)組使用簡介

    在上一篇教程——《Mootools 1.2教程(2)——DOM選擇器》中,我們介紹了一下選擇器,其中有很多方法就會返回?cái)?shù)組(一個你可以對其中內(nèi)容進(jìn)行多種操作的特殊列表)。
    2009-09-09
  • MooTools 1.2中的Drag.Move來實(shí)現(xiàn)拖放

    MooTools 1.2中的Drag.Move來實(shí)現(xiàn)拖放

    今天我們開始第十二講,今天我們將仔細(xì)看一下Drag.Move——一個很強(qiáng)大的MooTools類,它可以讓你給你的web應(yīng)用添加拖放功能。
    2009-09-09
  • 一些mootools的學(xué)習(xí)資源

    一些mootools的學(xué)習(xí)資源

    一些mootools的學(xué)習(xí)資源,學(xué)習(xí)mootools的朋友可以參考下。
    2010-02-02
  • Mootools 1.2教程 函數(shù)

    Mootools 1.2教程 函數(shù)

    講一講JavaScript中的函數(shù)(function)的基本知識。
    2009-09-09
  • 用Mootools獲得操作索引的兩種方法分享

    用Mootools獲得操作索引的兩種方法分享

    用Mootools獲得操作索引的兩種方法分享,需要的朋友可以參考下。
    2011-12-12
  • Mootools 1.2教程 正則表達(dá)式

    Mootools 1.2教程 正則表達(dá)式

    今天我們將先簡要地看一下正則表達(dá)式,然后再看一下MooTools提供的一些讓正則表達(dá)式更容易使用的功能。
    2009-09-09
  • MooTools 1.2介紹

    MooTools 1.2介紹

    有人最近要求我們寫一個關(guān)于MooTools 1.2的30天的教程,這似乎也是個很不錯的主意,于是我們決定現(xiàn)在就開始。在這些教程中,我們假設(shè)用戶沒有任何MooTools或者是JavaScript經(jīng)驗(yàn),但是至少有基本的HTML和CSS知識。
    2009-09-09
  • 基于mootools 1.3框架下的圖片滑動效果代碼

    基于mootools 1.3框架下的圖片滑動效果代碼

    容器采用相對定位,圖片采用絕對定位,當(dāng)鼠標(biāo)移動到相應(yīng)的圖片上,改變?nèi)eft屬性,用tween實(shí)現(xiàn)動畫效果.
    2011-04-04

最新評論