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，原文链接