创建与区域相关的时钟

Question

I have a working clock for my local server and for my browser (local system). Both works great. Now what I want to do is find the time offset between the clocks, based on seconds, and add it to the local system clock.

For example: my system clock is: 10:00:00 and the server clock is 12:15:00 at the same date. then the offset will be: 02:15:00 (of course it will be in seconds but just for the example I wrote it that way). And then add it to (browser)local time so I eventually get to show the server time. 12:15:00.

This is what I'm doing here:

var interval = self.setInterval(function(){
  clock();
},1000);

function clock()
{   
    //Get local server time
    <?php $today = getdate(); ?>;
    var ser = <?php echo $today[0]; ?>;

    //Local client time
    var seconds = Date.now();
    var offset = seconds-ser*1000;
    parseInt(offset/1000);

    var d = new Date();
    d.setTime(Date.now()-offset);
    var h = d.getHours();
    var m = d.getMinutes();
    var s = d.getSeconds();

    if(s < 10)
      s = "0" + s;
    if(m < 10)
      m = "0" + m;
    if(h < 10)
      h = "0" + h;

    var tm = h+":"+m+":"+s;
    document.getElementById("clock").value = tm;
} 

But as soon as I put the variable

offset

in this line: d.setTime(Date.now()-offset);

The clock doesn't updates anymore. I guess there is an issue with PHP compatibility. Any idea how to solve it? Thanks

Answer 1

The offset calculation has to be outside of the repeadly called function:

//Get local server time
<?php $today = getdate(); ?>;
var ser = <?php echo $today[0]; ?>;

//Local client time
var seconds = Date.now();
var offset = seconds-ser*1000;
parseInt(offset/1000); // BY THE WAY: As the returnval of parseInt isn't stored anywhere, this line does nothing

var interval = self.setInterval(function(){
  clock();
},1000);

function clock()
{   

    var d = new Date();
    d.setTime(Date.now()-offset);
    var h = d.getHours();
    var m = d.getMinutes();
    var s = d.getSeconds();

    if(s < 10)
      s = "0" + s;
    if(m < 10)
      m = "0" + m;
    if(h < 10)
      h = "0" + h;

    var tm = h+":"+m+":"+s;
    document.getElementById("clock").value = tm;
}