Clock on webpage using server and system time?

Asked 8/7, 2011 at 12:13 Answered 17/11, 2017 at 3:54

Solved javascript ajax vb.net clock clock-synchronization

I need to add a clock to a web page. The clock needs to be synchronized with a server but I really don't want to have it constantly check the server as the page will be open 24/7 on several PCs. Is there some way to get the time from the server and then use the systems clock to keep it updated and check the server every 15 minutes or so to keep it synced?

Brendanbrenden answered 8/7, 2011 at 12:13 Comment(2)

Are you wanting to show the time in the server's configured timezone, or the local timezone of the PC that the browser is running on? (or something else that I haven't thought of) – Bucky 16/2, 2022 at 12:25

@CraigMcQueen I asked this question 11 years ago, time zones weren't even on my radar! – Brendanbrenden 16/2, 2022 at 19:14

The way I've gone about this before is:

Take the time from the server,
Take the time from the client (immediately)
Get an offset.
When showing the clock, apply the offset to the current time on the client.

You only need to update this occasionally from the server.

The problem that you've got to sort out though is that in making a request to get the time from the server, there will be a lag before you can get the client time. You can probably minimize this by using an ajax request to get the server time and nothing else, thereby cutting overhead and network lag etc.

Overscrupulous answered 8/7, 2011 at 12:22 Comment(1)

Marking this as answer because this is what I decided to go with. – Brendanbrenden 21/7, 2011 at 19:8

+Date.now() returns local ms since the Unix epoch. So:

Get time from server
Calculate difference between server time and local time
Update the clock every second or minute (depending on what you're displaying) by getting the local time and adjusting it using the difference
Every 15 mins update the difference.

Or something like that.

Here's a fiddle demonstrating the first half:

var serverTime = 1310127993162; //this would come from the server obviously
var localTime = +Date.now();
var timeDiff = serverTime - localTime;

setInterval(function () {
    console.log(+Date.now() + timeDiff);
}, 1000);

Ciscaucasia answered 8/7, 2011 at 12:18 Comment(0)

Server Time: <input type="text" id="clock" value="" size='8'>

<script type="text/javascript">
var serverTime = <?php echo time() * 1000; ?>; //this would come from the server
var localTime = +Date.now();
var timeDiff = serverTime - localTime;

setInterval(function () {
    var realtime = +Date.now() + timeDiff;
    var date = new Date(realtime);
    // hours part from the timestamp
    var hours = date.getHours();
    // minutes part from the timestamp
    var minutes = date.getMinutes();
    // seconds part from the timestamp
    var seconds = date.getSeconds();

    // will display time in 10:30:23 format
    var formattedTime = hours + ':' + minutes + ':' + seconds;

    $('#clock').attr('value',formattedTime); <-- input id=clock
}, 1000);
</script>

Unfetter answered 18/9, 2013 at 13:0 Comment(0)

one idea is to response datetime on page when it is requested. like:

<html>
your serveside codes,
<script>
var serverdatetime = new Date("<%=Datetime.Now%>");
//use serverdatetime and update it after 15 mins.

// you can use ajax to get datetime
setTimeout(function(){
    $.ajax({
  url: 'http://yourhost.com/getdate',
  success: function( data ) {
    // use data and update serverdatetime
  }
});},54000);
</script>
server codes

</html>

**note : this is idea only, code may not work

Nugatory answered 8/7, 2011 at 12:21 Comment(0)

You can get the current time from the server on every page load, so even on first load you will have the current server time. After that, you may use a javascript timer on the page set to tick every second, and then you will virtually have a clock working synchronized with the server. You may also try applying offsets as suggested, but i wouldn't recommend since there's lag during postbacks.

Ajax request might be an interesting option.

Any doubts, you may also check this clock out!

Also, W3Schools is a great reference for javascript.

England answered 8/7, 2011 at 12:34 Comment(0)

<script>
var ctoday = <?php echo time() * 1000 ?>;
setInterval(function() {ctoday += 1000;},1000);
function startTime() {
    var today = new Date(ctoday);
    var montharray = new Array("Jan","Feb","Mar","Abr","May","Jun","Jul","Ogu","Sep","Oct","Nov","Des");
    var h = today.getHours();
    var ampm = h >= 12 ? 'PM' : 'AM';
    h = h % 12;
    h = h ? h : 12;
    var m = today.getMinutes();
    var s = today.getSeconds();
    h = checkTime(h);
    m = checkTime(m);
    s = checkTime(s);
    document.getElementById('txt').innerHTML =
    checkTime(today.getDate())+" "+montharray[today.getMonth()]+" "+today.getFullYear() + " (" + ampm +" " + h + ":" + m + ":" + s +")"; 
    setTimeout(startTime, 1000);
}

function checkTime(i) {
    if (i < 10) {i = "0" + i};
    return i;
}
</script>
<body onLoad="startTime();">
    <span id="txt"></span>
</body>

Create a Variable holds server time using PHP.
Adds 1000 to the time stamp every 1 sec (1000 = 1 sec).
now get the Hours.
Now instantiate a new date with incremented time stamp.
creates a months names
detect AM or PM.
convert the hours format from 24 to 12
Getting the minutes
Getting the seconds
add 0 leads if hours less than 10
add 0 leads if minutes less than 10
add 0 leads if seconds less than 10
Now concatenate all time and date and put them in the DOM element with ID "txt"
repeat the function every 1 sec
function adds 0 to lead the numbers < 10

Proustite answered 21/8, 2016 at 17:47 Comment(2)

Could you add an explanation? – Rene 22/8, 2016 at 6:50

explanation added line by line – Proustite 22/8, 2016 at 10:14

Try below code this :

var m_serverDateTime;
var currentOffsetedTime;
var diffMilliseconds;

$(document).ready(function () {
   m_serverDateTime = getServerDateTime();/*your function to get server time 
by ajax call */   
diffMilliseconds = GetServerTimeDifference(m_serverDateTime);

});

 function GetServerTimeDifference(serverdatetime) {
  var fromdate = new Date();

  var todate = new Date(serverdatetime);

  var localdiffMilliseconds = todate - fromdate;

  return localdiffMilliseconds;
 }

setInterval(function () {
  //var currentOffsetedTime = new Date().setMinutes(diffMinutes);
  currentOffsetedTime = new Date();
  currentOffsetedTime.setMilliseconds(diffMilliseconds);

  $('#lblTimer').text(format(currentOffsetedTime, 'dd/MM/yyyy  HH:mm'));
}, 1000);

Scoff answered 20/9, 2017 at 16:52 Comment(0)

you just get one time date time from server, on load call this method and use moments js for format date:

var timeMiliSecond = new Date(serverTime).getTime();
 callRepeatedly() {
    setTimeout(() => {
         timeMiliSecond = timeMiliSecond+1000;         
         serverTime=moment(newDate(timeMiliSecond)).format('MM-DD-YYYY HH:mm:ss');
         this.callRepeatedly();
      }, 1000)  
  }

Dieldrin answered 17/11, 2017 at 3:54 Comment(0)

Recommended topics

Hot tags