前端界面如何获取服务器时间

今天用Hbuilder写APP的时候，用js获取当前时间。突然发现显示的时间不同，才发现原来显示的是客户端时间，而并非是服务端的时间。所以就试一下获取服务器的时间。

附上：使用js获取客户端时间，并且显示的结果代码。

function getTime(){    
    var time=new Date();
    var y=time.getFullYear();
    var m=time.getMonth()+1;
    var d=time.getDate();
    var h=time.getHours();
    var min=time.getMinutes();
    var s=time.getSeconds();
        m=m<10?(m="0"+m):m;
        d=d<10?(d="0"+d):d;
        h=h<10?(h="0"+h):h;
        min=min<10?(min="0"+min):min;
        s=s<10?(s="0"+s):s;return  y+"-"+m+"-"+d+" "+h+":"+min+":"+s;      
}

显示结果：2019-07-01 20:54:55

以上是使用js获取客户端的当前时间。如何获取服务器的时间呢？网上有很多种方法，我就只把自己的方法写出来。方法如下：

1、服务端我是使用的web server（其他的接口也是同样的道理）。

首先获取服务器当前的时间戳(例如：1561986080000 表示 2019-07-01 21:01:20)(注意：时间戳是使用毫秒为单位的，如果获取的是秒为单位的，就*1000即可。)

然后返回时间戳即可。这样，服务端的接口就完成了。

webserver方法如下：

 [WebMethod]
 [ScriptMethod(ResponseFormat = ResponseFormat.Xml)]
  public string getServerTime() {
      TimeSpan ts = DateTime.UtcNow - new DateTime(1970, 1, 1, 0, 0, 0, 0);
      return (Convert.ToInt64(ts.TotalSeconds)*1000).ToString();
  }

2、前端使用ajax调用接口，并且获取服务端返回的结果(即当前服务器的时间戳)

ajax的代码如下：(注意：这个ajax的调用使用的是mui里面的ajax方法，使用jquery要做部分的修改)

//获取服务器时间戳
function getServerTime(){
    mui.ajax("http://127.0.0.1/WInFo.asmx/getServerTime",{    
        dataType:'xml',//服务器返回json格式数据
        type:'post',//HTTP请求类型
        timeout:5000,//超时时间设置为10秒；    
         success: function (response) { //回调函数，result，返回值         
            var json = $(response).text();
            server_time=parseFloat(json);　　//注意：这里要转化成float类型
        },    
        error:function(xhr,type,errorThrown){ //异常处理； console.log(type);
        }
    });
}

这样就可以得到服务器的当前时间，并且赋值给了上面的server_time。

然后在使用js把得到的时间戳转化为正常的时间显示出来。代码如下：

(

注意一下代码跟上面的代码区别：

①：var time=new Date(server_time)就可以直接转化为正常的时间显示了

)

//获取当前时间
function getTime(){    
    var time=new Date(server_time);
    var y=time.getFullYear();
    var m=time.getMonth()+1;
    var d=time.getDate();
    var h=time.getHours();
    var min=time.getMinutes();
    var s=time.getSeconds();
        m=m<10?(m="0"+m):m;
        d=d<10?(d="0"+d):d;
        h=h<10?(h="0"+h):h;
        min=min<10?(min="0"+min):min;
        s=s<10?(s="0"+s):s;return  y+"-"+m+"-"+d+" "+h+":"+min+":"+s;      
}

接着，使用时钟每秒钟调用getTime()方法一次，让时间能够正常显示。(注意下面代码的server_time+=1000，表示，每秒钟给获得的时间戳加1000，这就是为什么前面的代码要把获取得到服务端的时间戳转化为float类型的原因，不然的话使用server_time+=1000;会报错)

//实时显示时间
setInterval(
      function(){
          $(".time").html(getTime() ) ;
　　　　　　server_time+=1000;
      },1000     
);

这样，基本上就可以显示服务器的时间了。不过显示的时间长了之后可能会出现误差，为了减少误差，我就再加一个时钟，每1分钟调用接口一次，重新获取服务器的时间戳。代码如下：

//每60s刷新一次时间
setInterval(
   function(){
       getServerTime();    //获取服务器时间戳方法
   },60000          
);

这样就完成了。

有人可能会说，还不如直接每秒钟调用服务器接口，这样就不用那么麻烦了，其实这样也可以，毕竟方法有好多种，我只是按照我自己的方法显示出来而已。我这样做是为了减少频繁地对服务器进行读取，所以才这样做。所以方法有好多种，我的方法仅供参考。