前端界面如何獲取服務器時間

今天用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          
);

這樣就完成了。

有人可能會說，還不如直接每秒鍾調用服務器接口，這樣就不用那么麻煩了，其實這樣也可以，畢竟方法有好多種，我只是按照我自己的方法顯示出來而已。我這樣做是為了減少頻繁地對服務器進行讀取，所以才這樣做。所以方法有好多種，我的方法僅供參考。