很多小伙伴做倒计时，会使用2个方式：

1、使用本地时间来进行倒计时，这个是最大的误区，如果用户改变了本地时间，那你这个倒计时的功能就是白搭了；

2、要求服务器返回一个服务器时间给到前端，然后前端根据服务器的时间进行倒计时，这个方式是最常用的方式，也是最普遍的方式，但这样就必须要前后端配合起来来开发了；

今天就给大家介绍一种，完全前端的方式，并且也是获取的服务器的时间方式；这样以后大家做倒计时，就不要去依赖后端人员返回时间给你了，一个方法完全搞定，那就是直接空请求当前的服务器。来说下原理吧，原理很简单：就是获取服务器返回的头部信息中的Date属性，但是这个得到的GMT(格林尼治时间) ，所以要转换一下为东八区的时间 ，这个就是响应服务器的当前时间，主要是处理客户端本地机器时间错误问题；本来是只想借助于jQuery来实现的，因为需要使用getResponseHeader的方法，但是奈何IE系列不兼容XMLHttpRequest，必须要先对XHR做一下兼容了，所以只能苦逼的使用原生来做了！

HTML代码：

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE HTML>
<html>
<head>
<meta charset='UTF-8'/>
<title>JS获取服务器当前时间制作倒计时</title>
<script src="http://www.npm8.com/jquery.js"></script>
</head>
<body>
距到期<span id="end2">xx</span>天
</body>
</html>

JS代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
function countday(){
    var day=0;
    var xhr=new XMLHttpRequest();
    if (!xhr) {
        xhr=new ActiveXObject("Mirosoft.XMLHTTP");
    };
    xhr.open('HEAD',location.href+'?r='+(new Date()).valueOf(),false);
    xhr.onreadystatechange=function(){
        if (xhr.readyState==4 &amp;&amp; xhr.status==200) {
            var nowstr=new Date(xhr.getResponseHeader("Date"))+'';
            var date=new Date(Date.parse(nowstr.replace(/-/g,"/"))).getTime();
            var reg = /^\s*([1-9]\d{3})\-(\d{1,2})\-(\d{1,2})\s*$/;
            var _end1='2015-11-19';
            if (!reg.test(_end1)) 
            {
                throw new Error("Date Format Is Error !");
                return;
            }
            var end1 = new Date(_end1.replace(reg, "$1"), parseInt(_end1.replace(reg, "$2")) - 1, _end1.replace(reg, "$3"));
            day=Math.ceil((end1 - date)/(1000*60*60*24));
            if(day<1){
                window.location.href="http://www.baidu.com";
                return;
            };
        };
    }
    xhr.send(null);
    return day;
}
window.onload = function() 
{
    $('#end2').html(countday());
}