JavaScript倒計時組件

序言：倒計時應用於各網站頁面，普遍存在，用過別人寫的庫(復雜)組件，也怕自己寫的不好，今天又遇到一個倒計時的需求，因此打算自己寫一遍。
作者：華子yjh

 

一、組件API

1、組件調用方式

countDown(targetTime, callback(d, h, m, s)); // 組件調用方式

 

2、參數(Params)說明

targetTime: // 用戶設置倒計時的目標時間

callback(d, h, m, s): // 回調函數，其參數分別為倒計時間中的天、小時、分鍾、秒值

 

二、使用案例

1、HTML結構

<div id="countdown"></div>

 

2、JavaScript代碼

var targetTime = '2013/03/15 18:00:00'; // 大於本地時間(假如本地時間為：2013/3/14 16:10:00)
countDown(targetTime, function(d, h, m, s) {
    // 補零
    for (var i = 0, len = arguments.length; i < len; i++) {
        if (String(arguments[i]).length < 2) {
            arguments[i] = '0' + arguments[i];
        }
    }
    // dom操作
    var dom = document.getElementById('countdown');
    dom.innerHTML = d + '天' + h + '小時' + m + '分鍾' + s + '秒';
});

 

3、瀏覽器顯示結果

dom元素內容為：01天01小時50分鍾00秒

 

三、組件源碼

function countDown(targetTime, callback) {

    // 定義一個創建XHR對象的函數
    function createXHR() {
        if (typeof XMLHttpRequest !== 'undefined') {
            createXHR = function() {
                return new XMLHttpRequest();
            };
        } else if (typeof ActiveXObject !== 'undefined') {
            createXHR = function() {
                if (typeof arguments['activeXString'] !== 'string') {
                    var versions = ['MSXML2.XMLHttp.6.0', 'MSXML2.XMLHttp.3.0', 'MSXML2.XMLHttp'];

                    for (var i = 0, len = versions.length; i < len; i++) {
                        try {
                            var xhr = new ActiveXObject(versions[i]);
                            arguments['activeXString'] = versions[i];
                            return xhr;
                        } catch(e) {}
                    }
                }
                return new ActiveXobject(arguments['activeXString']);
            };
        }
        return createXHR();
    }

    // 創建一個XHR對象
    var xhr = createXHR();
    xhr.open('HEAD', window.location.href); // 建立一個請求
    xhr.send(null); // 發送請求
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4) {
            if (xhr.status === 200) {
                var t_timestamp = Date.parse(targetTime),
                serverTime = new Date(xhr.getResponseHeader('Date')),
                s_timestamp = Date.parse(serverTime),
                c_timestamp = t_timestamp - s_timestamp; // 倒計時間戳
                if (c_timestamp > 0) {
                    setTimeout(function callee() {
                        countdownTime(c_timestamp);
                        if (c_timestamp > 0) {
                            c_timestamp -= 1000;
                            setTimeout(callee, 1000);
                        }
                    }, 1);
                }
            }
        }
    };

    // 計算倒計時間(天，小時，分鍾，秒)，並傳入回調函數，執行回調
    function countdownTime(c_timestamp) {
        var d, h, m, s;
        c_timestamp = c_timestamp / 1000;

        d = parseInt(c_timestamp / 3600 / 24, 10); // 天數
        h = parseInt(c_timestamp / 3600 % 24, 10); // 小時
        m = parseInt(c_timestamp % 3600 / 60, 10); // 分鍾
        s = parseInt(c_timestamp % 3600 % 60, 10); // 秒

        if (typeof callback === 'function') {
            callback(d, h, m, s);
        }
    }
};

 

四、PS源碼

源碼解讀：

1、創建XHR對象函數為自定義函數，也稱惰性載入函數，該函數代碼來自JavaScript高級程序設計一書，但是去除了arguments.callee寫法，原因是ES5不支持；

2、組件中的第二個參數作為函數執行，該函數稱為回調函數(運用閉包，將程序中通過復雜計算后的變量傳入回調中，方便操作)；

3、如果你沒有看源碼就測試的話，需要一個本地服務器來測試；如果你認為代碼中有優化的地方，盼PS！

 

轉載請注明來自博客園：華子yjh，原文鏈接