JavaScript倒计时组件

转自：http://www.cnblogs.com/yangjunhua/archive/2013/03/14/2960580.html

 

序言：倒计时应用于各网站页面，普遍存在，用过别人写的库(复杂)组件，也怕自己写的不好，今天又遇到一个倒计时的需求，因此打算自己写一遍。
作者：华子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！