Javascript clock with server time PHP

Question

I struggling with server time. I need timer on my website (count every second) but not client side time but server. But my script operating only with client time:

<script> 
setInterval(function() {
var d = new Date();
    $('#timer').text((d.getHours() +':' + d.getMinutes() + ':' + d.getSeconds() ));
}, 1000);
</script> 

<label id="timer"></label>

Script above work fine. How I can integrate server time and update very one second?

@MarcoMura ouch, don't do that! you should be fine if you sync every 30secs or once a minute. — low_rents, Dec 12 '14 at 10:03
@northkildonan i'd like to do it with JS however he "needs" to do it server side lol :D — Marco Mura, Dec 12 '14 at 10:03
@MarcoMura if he really needs that, he should do it with node.js and websockets (socket.io) at least. because with ajax this will be really messy (display stuttering). — low_rents, Dec 12 '14 at 10:05
@northkildonan or maybe a js file or xml, if i remember Javascript can access remote file and refresh them (file written by php or others system eh) — Marco Mura, Dec 12 '14 at 10:06

score 5 · Accepted Answer · answered Dec 12 '14 at 10:09

5

Get the date from the server, convert it to a javascript date, then increment it yourself.

<?php $today = getdate(); ?>
<script>
    var d = new Date(Date.UTC(<?php echo $today['year'].",".$today['mon'].",".$today['mday'].",".$today['hours'].",".$today['minutes'].",".$today['seconds']; ?>));
    setInterval(function() {
        d.setSeconds(d.getSeconds() + 1);
        $('#timer').text((d.getHours() +':' + d.getMinutes() + ':' + d.getSeconds() ));
    }, 1000);
</script> 
<label id="timer"></label>

EDIT: JSFiddle with example PHP echoed in.

answered Dec 12 '14 at 10:09

James Hunt

2,448
11
23

2

This will go off over time. Intervals are not guaranteed to be exact. – Marek Dec 12 '14 at 10:19
True, but this is essentially his only option. Requesting from the server would take time to execute, throwing it off. Constantly refreshing is ridiculous. Best you can do is assign it to the correct time once and assume the page is refreshed often, or adding a refresh to the javascript to proc every few minutes to re-sync with server time. – James Hunt Dec 12 '14 at 10:28
@JamesHunt no, the best thing to do would be to sync it once every minute. or even every couple of minutes. but with no sync at all, there will be a huge difference between displayed time and server time after a few hours. – low_rents Dec 12 '14 at 10:46
@northkildonan Which is why I put in the above comment "Best you can do is assign it to the correct time once and assume the page is refreshed often, or adding a refresh to the javascript to proc every few minutes", which is exactly what you suggested... – James Hunt Dec 12 '14 at 10:48
@JamesHunt but the best way to sync it would be to do it with ajax, not a full page reload if you just wanna sync the time. – low_rents Dec 12 '14 at 12:26

score 3 · Answer 2 · answered Dec 12 '14 at 09:57

I worked on a code for count down using the server time . You can use something similar to this for your code

<?php
 $now = date('d-m-Y');
 $end= "01-01-2013"
 $date = strtotime($end) - strtotime($now);
 $days = date('d', $date);
 $monthes= date('m', $date);
 $years= date('Y', $date);
?> 
<script>
  var days = "<?= $days ?>";
  var monthes= "<?= $monthes?>";
  var years= "<?= $years?>";

    document.getElementById('countdown').innerHTML = days+ ' days';

    document.getElementById('countdown').innerHTML += monthes+ ' monthes';

    document.getElementById('countdown').innerHTML += years+ ' years';
</script>

Javascript clock with server time PHP

2 Answers2

Linked