Javascript clock?

Question

I get the GMT time in PHP and I would like to make it count, like the clocks.

<?php $time = gmdate('H:i:s'); ?>

<script>var time = <?php echo($time) ?>;
    setInterval(function() {
        time += 1;
        $("#timediv").text("Current time (GMT): " + time);
        //somehow convert it to 11:44:31 AM ??
    }, 1000);
</script>

Can seomeon help me?

Use the clients clock. Otherwise it will drift. And get the current time from the client each time it is updated. http://stackoverflow.com/questions/10211145/getting-current-date-and-time-in-javascript — Ed Heal, Jan 03 '15 at 12:17

Robo Robok · Answer 1 · 2015-01-03T13:04:50.620

First of all, relying on setTimeout/setInterval accuracy for displaying time is not a good idea. There are multiple reasons for them not being that accurate, like CPU slowdowns. That's why you should rather use Date object, which uses actual clock.

This is what I do when I want to use my server's time on the client side:

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>

<!-- dateFormat plugin for nice and easy time formatting -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-dateFormat/1.0/jquery.dateFormat.min.js"></script>

<script>
    var clientTime = (new Date()).getTime(),
        serverTime = <?php echo time() ?> * 1000,
        difference = clientTime - serverTime;

    setInterval(function () {
        var now = new Date();

        now.setTime(now.getTime() - difference);

        $("#timediv").text("Current time (GMT): " + $.format.date(now, "hh:mm:ss a"));
    }, 1000);
</script>

The key concept behind it is to calculate the difference between server time and client time. Then, you normalize your client side (created each time with new Date()) with the difference. We are still using setInterval, but even if it's delayed or accelerated for some reason, the time displayed is still correct.

All of my yes. The only slight thing I would change is to have the `setInterval` be more frequent, such as 100-250 instead of 1000. Reason for this is that it's not completely accurate, and it bothered me a lot on my first clock to see two seconds pass by in a single tick ;) — Niet the Dark Absol, Jan 03 '15 at 13:05

score 0 · Answer 2 · answered Jan 03 '15 at 12:26

0

I would not follow motanelu's answer but change it to this:

<script>var time = Date.parse('<?php echo($time) ?>');
    setInterval(function() {
        time.setSeconds(time.getSeconds() + 1);
        $("#timediv").text("Current time (GMT): " + time);
        //somehow convert it to 11:44:31 AM ??
    }, 1000);
</script>

This creates a Date object which can you can format with for example time.toLocaleTimeString();

answered Jan 03 '15 at 12:26

Richard87

1,592
3
16
29

This will use the client's date, not the server's! – motanelu Jan 03 '15 at 12:29
1

how will this use the clients date? notice i populate the Date() from the php script :) – Richard87 Jan 03 '15 at 12:33

score -1 · Answer 3 · answered Jan 03 '15 at 12:15

-1

Replace

<?php $time = gmdate('H:i:s'); ?>

with

<?php $time = gmdate('h:i:s A'); ?>

answered Jan 03 '15 at 12:15

motanelu

3,945
1
14
21

Why? Explain your answer. – Niet the Dark Absol Jan 03 '15 at 13:07
You've changed from a 24-hours representation to a 12-hour one. Why is that a good idea? – Niet the Dark Absol Jan 04 '15 at 00:46
Did you actually read the question? Especially the part with //somehow convert it to 11:44:31 AM ?? – motanelu Jan 04 '15 at 01:29

score -1 · Answer 4 · answered Jan 03 '15 at 13:00

-1

Thank you guys, I made it:

PHP:

$time = gmdate('H:i:s');
$time = preg_replace("/^([\d]{1,2})\:([\d]{2})$/", "00:$1:$2", $time);
sscanf($time, "%d:%d:%d", $hours, $minutes, $seconds);
$timeInSeconds = $hours * 3600 + $minutes * 60 + $seconds;

Javascript:

<script>
    function fromSeconds(sec){
        var d=new Date(0,0,0);
        d.setSeconds(+sec);
        return (d.getHours() ? d.getHours()+":" : "")+d.getMinutes()+":"+d.getSeconds();
    }

    var time = <?php echo($timeInSeconds) ?>;
    var newTime = 0;
    setInterval(function() {
        time += 1;
        var newTime = fromSeconds(time);
        $("#timediv").text("The current GMT time is: " + newTime);
    }, 1000);');
    ?>
</script>

answered Jan 03 '15 at 13:00

Tear Bizom

49
6

This is bad, but you probably won't notice it. Just because you tell the code to run every 1,000 milliseconds, does *not* mean that it will run at *exactly* that time. There is usually a +/- 8 millisecond inaccuracy with every tick. See Robo Robok's answer for how it should be done. – Niet the Dark Absol Jan 03 '15 at 13:06
Why the downvote instead of just upvoting the best answer? As long as the others are not *wrong* (based on the question)? – Richard87 Jan 03 '15 at 13:34

Javascript clock?

4 Answers4