JavaScript同步服务器时间的倒计时

JavaScript同步服务器时间的倒计时

功能要求：

1、定时同步服务器时间，保证倒计时准确。

2、能够同时实现多个抢购商品的倒计时。

1、创建/ajax/SysTimeHandler.ashx一般处理程序

用于页面请求，获取服务器时间。

<%@ WebHandler Language="C#" Class="SysTimeHandler" %>

using System;
using System.Web;

public class SysTimeHandler : IHttpHandler {
    
    public void ProcessRequest (HttpContext context) {
        context.Response.ContentType = "text/plain";
        string time = DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss");
        context.Response.Write(time);
    }
 
    public bool IsReusable {
        get {
            return false;
        }
    }

}

2、创建index.aspx页面

<h2>商品1 </h2>
<p class="buy_time" endTime="2013-09-20 16:08:00">
    离抢购时间：<br />
    <b>0</b>天<b>0</b>小时<b>0</b>分<b>0.0</b>秒
    <input type="button" class="btn" value="即将开始"  /> 
</p>

<h2>商品2</h2>
<p class="buy_time" endTime="2013-10-25 18:10:45">
    离抢购时间：<br />
    <b>0</b>天<b>0</b>小时<b>0</b>分<b>0.0</b>秒
    <input type="button" class="btn" value="即将开始"  /> 
</p>

<h2>商品3</h2>
<p class="buy_time" endTime="2013-5-25 18:10:45">
    离抢购时间：<br />
    <b>0</b>天<b>0</b>小时<b>0</b>分<b>0.0</b>秒
    <input type="button" class="btn" value="即将开始"  /> 
</p>

3、创建index.js脚本文件

注意：该实例使用了JQuery，是、所以页面中要引用JQuery包。

3.1 在页面声明保存服务器时间的公共变量

注意：该变量要在页面加载时初始化，获取准确的服务器时间。

<script type="text/javascript">
    var sysTime = '<%=DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss") %>';    //服务器时间
</script>

3.2 功能初始化

$(document).ready(function() {
    //初始化所有的抢购计数器
    $(".buy_time").each(function(i) {
        var endTime = $(this).attr("endTime");    //结束时间
        $(this).clock(endTime, callback);         //倒计时
    });
    setInterval(getSystemTime, 300000);            //每5分钟请求获取服务器时间
});

3.3 倒计时方法

//倒计时
$.fn.clock = function(endTime, callback) {
    this.each(function() {
        var _this = this,
            _time = {},
            _sysTime = '',
        getMS = function(s) {
            var t = getStrTime(s);
            return new Date(t.YY, t.MM - 1, t.DD, t.hh, t.mm, t.ss).getTime();
        },
        getRS = function() {
            if (_sysTime != sysTime) {
                _sysTime = sysTime;
                return getMS(endTime) - getMS(sysTime);
            } else {
                return _time.rs - 100;
            }
        },
        countDown = function() {
            _time.rs = getRS();
            if (_time.rs >= 0) {
                _time.dd = Math.floor(_time.rs / 1000 / 60 / 60 / 24);
                _time.hh = Math.floor(_time.rs / 1000 / 60 / 60 % 24);
                _time.mm = Math.floor(_time.rs / 1000 / 60 % 60);
                _time.ss = Math.floor(_time.rs / 1000 % 60);
                _time.ds = Math.floor(_time.rs / 100 % 10);

                $(_this).find("b").eq(0).html(_time.dd);
                $(_this).find("b").eq(1).html(_time.hh);
                $(_this).find("b").eq(2).html(_time.mm);
                $(_this).find("b").eq(3).html(_time.ss + "." + _time.ds);
            }
            callback.call(_this, _time);
            if (_time.rs <= 0) {
                clearTimeout($(_this).data('clock_timer'));
            }
            else {
                $(_this).data('clock_timer', setTimeout(countDown, 100));
            }
        };
        clearTimeout($(_this).data('clock_timer'));
        countDown();
    });
};

function getStrTime(s) {
    var a = s.split(' '),
        d = a[0].split('-'),
        t = a[1].split(':');
    return {
        YY: d[0],
        MM: d[1],
        DD: d[2],
        hh: t[0],
        mm: t[1],
        ss: t[2]
    };
}

3.4 请求服务器时间

//请求服务器时间
function getSystemTime() {
    $.ajax({
        url: '/ajax/SysTimeHandler.ashx',
        type: "Post",
        dataType: "text",
        success: function(result) {
            sysTime = result;
        }
    });
}

3.5 抢购方法（回调函数）

//回调方法
function callback(time) {
    if (time.rs < 0) {
        $(this).find(".btn").val("已经结束").unbind();
    }
    else if (time.rs == 0) {
        $(this).find(".btn").val("马上抢购").unbind().click(function() { alert("恭喜，成功抢购！") });
    }
    else if (time.rs <= 30000) {
        $(this).find(".btn").val(time.ss + "." + time.ds + "秒");
    }
}