想要將javascript倒計時同步到服務器時間，而不是客戶端時間

Question

我希望我的時間對每個客戶端（服務器時間）倒數一次，而不是計算機上的時間。這是我的倒計時，我該怎麼做？

這是應該爲每個人倒數一個日期的計時器，所以每個人都會看到計時器同時下降到0。

 <script type="text/javascript"> 
     var ringer = { 
      countdown_to: "07/20/2017 6:00 PM", 
      rings: { 
      'DAYS': { 
       s: 86400000, // mseconds in a day, 
       max: 365 
      }, 
      'HOURS': { 
       s: 3600000, // mseconds per hour, 
       max: 24 
      }, 
      'MINUTES': { 
       s: 60000, // mseconds per minute 
       max: 60 
      }, 
      'SECONDS': { 
       s: 1000, 
       max: 60 
      } 
      }, 
      r_count: 4, 
      r_spacing: 10, // px 
      r_size: 200, // px 
      r_thickness: 30, // px 
      update_interval: 11, // ms 


      init: function(){ 

      $r = ringer; 
      $r.cvs = document.createElement('canvas'); 

      $r.size = { 
       w: ($r.r_size + $r.r_thickness) * $r.r_count + ($r.r_spacing*($r.r_count-1)), 
       h: ($r.r_size + $r.r_thickness) 
      }; 



      $r.cvs.setAttribute('width',$r.size.w);   
      $r.cvs.setAttribute('height',$r.size.h); 
      $r.ctx = $r.cvs.getContext('2d'); 
      $(".countdownwrap").append($r.cvs); 
      $r.cvs = $($r.cvs);  
      $r.ctx.textAlign = 'center'; 
      $r.actual_size = $r.r_size + $r.r_thickness; 
      $r.countdown_to_time = new Date($r.countdown_to).getTime(); 
      $r.cvs.css({ maxWidth: $r.size.w+"px", maxHeight: $r.size.h+"px",width: "90%", height: "19%"}); 
      $r.go(); 
      }, 
      ctx: null, 
      go: function(){ 
      var idx=0; 

      $r.time = (new Date().getTime()) - $r.countdown_to_time; 


      for(var r_key in $r.rings) $r.unit(idx++,r_key,$r.rings[r_key]);  

      setTimeout($r.go,$r.update_interval); 
      }, 
      unit: function(idx,label,ring) { 
      var x,y, value, ring_secs = ring.s; 
      value = parseFloat($r.time/ring_secs); 
      $r.time-=Math.round(parseInt(value)) * ring_secs; 
      value = Math.abs(value); 

      x = ($r.r_size*.5 + $r.r_thickness*.5); 
      x +=+(idx*($r.r_size+$r.r_spacing+$r.r_thickness)); 
      y = $r.r_size*.5; 
      y += $r.r_thickness*.5; 


      // calculate arc end angle 
      var degrees = 360-(value/ring.max) * 360.0; 
      var endAngle = degrees * (Math.PI/180); 

      $r.ctx.save(); 

      $r.ctx.translate(x,y); 
      $r.ctx.clearRect($r.actual_size*-0.5,$r.actual_size*-0.5,$r.actual_size,$r.actual_size); 

      // first circle 
      $r.ctx.strokeStyle = "rgba(10,22,51, 1)"; 
      $r.ctx.beginPath(); 
      $r.ctx.arc(0,0,$r.r_size/2,0,2 * Math.PI, 2); 
      $r.ctx.lineWidth =$r.r_thickness; 
      $r.ctx.stroke(); 

      // second circle 
      $r.ctx.strokeStyle = "rgba(23,149,210,1)"; 
      $r.ctx.beginPath(); 
      $r.ctx.arc(0,0,$r.r_size/2,0,endAngle, 1); 
      $r.ctx.lineWidth =$r.r_thickness; 
      $r.ctx.stroke(); 

      // label 
      $r.ctx.fillStyle = "#fff"; 

      $r.ctx.font = '16px Helvetica'; 
      $r.ctx.fillText(label, 0, 40); 


      $r.ctx.font = 'bold 80px Helvetica'; 
      $r.ctx.fillText(Math.floor(value), 0, 18); 

      $r.ctx.restore(); 
      } 
     } 

     ringer.init(); 
    </script> 

Answer 1

var xmlHttp; 
    function srvTime(){ 
    try { 
     //FF, Opera, Safari, Chrome 
     xmlHttp = new XMLHttpRequest(); 
    } 
    catch (err1) { 
     //IE 
     try { 
      xmlHttp = new ActiveXObject('Msxml2.XMLHTTP'); 
     } 
     catch (err2) { 
      try { 
       xmlHttp = new ActiveXObject('Microsoft. 
      catch (eerr3) { 
       //AJAX not supported, use CPU time. 
       alert("AJAX not supported"); 
      } 
     } 
    } 
       xmlHttp.open('HEAD',window.location.href.toString(),false); 
xmlHttp.setRequestHeader("Content-Type", "text/html"); 
xmlHttp.send(''); 
return xmlHttp.getResponseHeader("Date"); 
} 

var st = srvTime(); 
var date = new Date(st); 

我發現這個解決方案要通過使用做什麼的Ajax

Answer 2

您使用的是哪種服務器操作系統和網絡服務器軟件？

而不是用JavaScript初始化時間，您可以向客戶端發送頁面，其初始化時間在用戶請求PHP頁面時得到解決，但如果您希望服務器爲您計數，您會需要編寫一個XML HttpRequest以在一個時間間隔內繼續請求當前時間。

Answer 3

你將要轉換爲服務器正在使用的任何時區（應使用UTC/GMT）。

function convertUTCToLocal(dateFromServer) { 
    var now = new Date(); 
    return dateFromServer.setMinutes(dateFromServer.getMinutes - now.getTimezoneOffset()); 
}