CODEWITHSUNDEEP
javascriptphptimerclock
Tear Bizom
Tear Bizom

Reputation: 59

Javascript clock?

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?

Upvotes: 2

Views: 575

Answers (4)

Robo Robok
Robo Robok

Reputation: 22673

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.

Upvotes: 6

Tear Bizom
Tear Bizom

Reputation: 59

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>

Upvotes: -1

Richard87
Richard87

Reputation: 1622

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();

Upvotes: 1

motanelu
motanelu

Reputation: 4025

Replace

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

with

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

Upvotes: -1

Related Questions