DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript基礎知識 >> JavaScript進階教程(第三課第二部分)第1/2頁
JavaScript進階教程(第三課第二部分)第1/2頁
編輯:JavaScript基礎知識     

    要使定時器循環工作你需要寫一個函數實現循環調用。這裡是一個例子:

    var the_count = 0;
    var the_timeout;
    function doTimer()
    {
        window.document.timer_form.the_text.value = the_count;
        the_count += 2;
        the_timeout = setTimeout("doTimer();", 2000);
    }

    這裡用到的定時器就是上一頁所用的定時器。當用戶點擊按鈕時就調用該函數。該函數將the_count的當前值寫到文字框中。然後the_count增加2,則開始調用函數自身。文字框中的數值也相應更新,the_count在增加2, 則再次調用函數自身。在等待的這兩秒期間浏覽器則可以執行其他的同步工作。the_count一增加2就執行另一次setTimeout()。你不用擔心會造成內存崩潰,因為在給定時間內只有一個setTimeout()在執行。

    而無限的"while" 循環則會鎖定浏覽器的工作,在執行該循環的過程中浏覽器不能同時執行別的任何指令。而setTimeout則可以使循環的間隙中讓浏覽器執行別的工作。

    如何取消setTimeout?

    現在你已經學習了如何設置一個無限循環。但是你必須懂得如何終止循環。其指令就是clearTimeout。上例中定時器還有下面這個表單元素:

    <input type="button" value="stop timer" onClick="clearTimeout(the_timeout);">

    點擊這個按鈕就可以終止定時器。指令是clearTimeout(),其實很簡單,如果你這樣設置setTimeout,the_timeout = setTimeout("some javascript",3000);

    你可以這樣取消定時器:clearTimeout(the_timeout);

    很簡單,對吧?下面我們看一個復雜循環定時器,一個可以報告時間的定時器。

    現在時間是:

   

    點擊“啟動時鐘”則時鐘開始運行。它從你的計算機中讀取時間並每半秒更新一次文字框中的顯示。這個例子通過一個自調用的函數設置了一個定時器。同時這個例子可以讓你了解一點Date對象的功能。當講解cookies時,我提到過Date對象。

    以下是代碼:
    function writeTime() {
        // 獲得日期對象
        var today = new Date();

        // 從對象中獲得信息
        var hours = today.getHours();
        var minutes = today.getMinutes();
        var seconds = today.getSeconds();

        // fixTime 使分和秒可以正常顯示
        // 對於小於10的數字則在該數字前加一個0
        minutes = fixTime(minutes);
        seconds = fixTime(seconds);

        //將時間字符串組合在一起並寫出
        var the_time = hours + ":" + minutes + ":" + seconds;
        window.document.the_form.the_text.value = the_time;

        //每半秒鐘執行一次該函數
        the_timeout= setTimeout('writeTime();',500);
    }

    function fixTime(the_time) {
        if (the_time <10)
        {
            the_time = "0" + the_time;
        }

        return the_time;
    }

    我們仔細研究一下代碼。

    var today = new Date();
    正如new Array() 可以生成一個新的數組,你可以可以用new Date() 生成一個新的日期對象。生成對象之後,你可以對其提出你的問題。你生成的新的日期對象的括號中間沒有任何參數, 但JavaScript會查詢計算機的始終並用其生成新的日期對象。現在我們的日期對象名為"today" ,我們可以從中提取相應的信息。

    var hours = today.getHours();
    這條用於獲得當前的小時值。它是軍隊格式的時間,即,如果當前時間是下午兩點,則它返回的值是14。getHours()是Javascript的日期對象內置的方法調用。

    var minutes = today.getMinutes(); var seconds = today.getSeconds();
    這幾行原理和getHours()類似。

    minutes = fixTime(minutes);
    getMinutes存在一些問題,如果分鐘是11:01, getMinutes將返回 "1"。時鐘的顯示格式可不是這樣,它應該顯示為“01”。fixTime函數就是用於執行糾正顯示格式的功能。

    下面兩行將字符串組合在一起並顯示出來,
    the_timeout = setTimeout('writeTime();', 500);

    設置每半秒執行一次該函數的循環。

    下一講我們將學習如何在定時器中加入變量。

當前1/2頁 12下一頁閱讀全文
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved