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

古城微笑少年丶 2021-07-25 00:13 356阅读 0赞

**功能要求：**

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 在页面声明保存服务器时间的公共变量 ##

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

## 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 + "秒");
        }
    }