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

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

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

functiongetTime(){var time=newDate();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 stringgetServerTime() {

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要做部分的修改)

//获取服务器时间戳

functiongetServerTime(){

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)就可以直接转化为正常的时间显示了

)

//获取当前时间

functiongetTime(){

var time=newDate(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);

这样就完成了。

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

原文：https://www.cnblogs.com/masha2017/p/11116833.html