今天用 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 把得到的时间戳转化为正常的时间显示出来. 代码如下:
(
注意一下代码跟上面的代码区别:
1: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
- );
这样就完成了.
有人可能会说, 还不如直接每秒钟调用服务器接口, 这样就不用那么麻烦了, 其实这样也可以, 毕竟方法有好多种, 我只是按照我自己的方法显示出来而已. 我这样做是为了减少频繁地对服务器进行读取, 所以才这样做. 所以方法有好多种, 我的方法仅供参考.
来源: http://www.bubuko.com/infodetail-3110329.html