My question is Client time only displayed, But want to display server time every seconds.

function GetCount(ddate,iid){

var date = new Date();
dateNow = date;

// if time is already past
if(amount < 0){

}
// else date is still good
else{
    days=0;hours=0;mins=0;secs=0;out="";

    amount = Math.floor(amount/1000);//kill the "milliseconds" so just secs

    days=Math.floor(amount/86400);//days
    amount=amount%86400;

    hours=Math.floor(amount/3600);//hours
    amount=amount%3600;

    mins=Math.floor(amount/60);//minutes
    amount=amount%60;

    secs=Math.floor(amount);//seconds

    document.getElementById(iid).innerHTML=days;
    document.getElementById('countbox1').innerHTML=hours;
    document.getElementById('countbox2').innerHTML=mins;
    document.getElementById('countbox3').innerHTML=secs;

    setTimeout(function(){GetCount(ddate,iid)}, 1000);
}
}

My question is Client time only displayed, But want to display server time every seconds.

function GetCount(ddate,iid){

var date = new Date();
dateNow = date;

// if time is already past
if(amount < 0){

}
// else date is still good
else{
    days=0;hours=0;mins=0;secs=0;out="";

    amount = Math.floor(amount/1000);//kill the "milliseconds" so just secs

    days=Math.floor(amount/86400);//days
    amount=amount%86400;

    hours=Math.floor(amount/3600);//hours
    amount=amount%3600;

    mins=Math.floor(amount/60);//minutes
    amount=amount%60;

    secs=Math.floor(amount);//seconds

    document.getElementById(iid).innerHTML=days;
    document.getElementById('countbox1').innerHTML=hours;
    document.getElementById('countbox2').innerHTML=mins;
    document.getElementById('countbox3').innerHTML=secs;

    setTimeout(function(){GetCount(ddate,iid)}, 1000);
}
}

• javascript

5 Answers 5

If you want to avoid all that network traffic checking the time with the server every second just: (1) have the server pass the time in a way that you store in a JS variable on page load; (2) also store the client time as at page load; (3) use setInterval to update the time (every 1000 milliseconds or as often as you want) by getting current client time minus client time at page load as an offset of server time at page load. (Obviously this will all go wrong if the user updates their PC clock while your page is running, but how many users would do that? And would it be the end of the world if they did?)

If you really want the actual server time every second - why? Seems a bit of a waste of bandwidth for little if any benefit, but if you must do it use Ajax as already suggested. If you're not familiar with Ajax I'd suggest using Google to find some tutorials - if you use JQuery you can do it with only a couple of lines of code. Easy.

Or put your onscreen clock in an IFRAME that repeatedly reloads itself. Just because I sometimes miss the days of IFRAMEs.

If you run into the issue that the server time is different from the client-side clock, I lookup a server time delta in minutes just once, and then I add it to the minutes of a new Date():

    var refDateTime = new Date();
    refDateTime.setMinutes(refDateTime.getMinutes() + getServerTimeDelta());
    // ...
    var serverTimeDelta;
    function getServerTimeDelta(recalc) {
       var xmlHttp;
       if (recalc || !serverTimeDelta) {
          try {
             if (window.XMLHttpRequest) {
                xmlHttp = new XMLHttpRequest();
             } else {
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
             }
          } catch(err1) {
             //IE
             try {
                xmlHttp = new ActiveXObject('Msxml2.XMLHTTP');
             } catch(err2) { /* swallow it */ }
          }
          if (xmlHttp) {
             xmlHttp.open('HEAD', window.location.href.toString(), false);
             xmlHttp.setRequestHeader("Content-Type", "text/html");
             xmlHttp.send('');
             var serverDateTime = xmlHttp.getResponseHeader("Date");
             if (serverDateTime) {
                 var dateNow = new Date();
                 var serverDate = new Date(serverDateTime);
                 var delta = serverDate.getTime() - dateNow.getTime();
                 // Convert to minutes
                 serverTimeDelta = parseInt((delta / 60000) + ''); 
                 if (!serverTimeDelta) serverTimeDelta = 0.01; 
              } else {
                 serverTimeDelta = 0.011; // avoid auto recalc
              }
          } else {
             serverTimeDelta = 0.012;
          }
       }
       return serverTimeDelta;
    }

You need your server to supply the time to JavaScript, either on page load or via XMLHttpRequest.

To get the server time from the client side in javascript you will need to make an ajax call. Do you know how to make that type of call?

You will basically make another page (or web method etc) which displays/returns the time. You will then use a XMLHttpRequest object to make the call and get the result.

Instead of AJAX I suggest the more modern FETCH https://developer.mozilla/en-US/docs/Web/API/Fetch_API