CODEWITHSUNDEEP
phptimeclock
Arash Yazdani
Arash Yazdani

Reputation: 75

create php live clock

How can i create a live clock with php that gets time from server not users pc time [not javascript]

i used the below code but time stops when using php variable

<form name="Tick">
<input type="text" size="12" name="Clock">
</form>
<script type="text/javascript">
function show(){
    var hours="<?php echo $myhour; ?>"
    var minutes="<?php echo $mymin; ?>"
    var seconds="<?php echo $mysec; ?>"
    var dn="AM" 
    if (hours>12){
        dn="PM"
        hours=hours-12
        //this is so the hours written out is in 12-hour format, instead of the default //24-hour format.
    }
    if (hours==0)
        hours=12
    //this is so the hours written out when hours=0 (meaning 12a.m) is 12
    if (minutes<=9)
        minutes="0"+minutes
    if (seconds<=9)
        seconds="0"+seconds
    document.Tick.Clock.value=
    hours+":"+minutes+":"+seconds+" "+dn
    setTimeout("show()",1000)
}
    show()
</script>

Upvotes: 2

Views: 52797

Answers (3)

JMather
JMather

Reputation: 61

I would send the timestamp across from the server just to get a snapshot of the current server time and then let JS take over from there. JS can keep the local clock pretty close to being synced with your server and you could run a new ajax call every x number of minutes/hours to resync with a fresh timestamp.

I haven't tested this, but if accuracy isn't an issue this should work pretty well and keep your server work to a minimum.

Edit: I actually ended up doing this for a project I'm working on and it works great.

You just need to get your timestamp from your server into your JS - Since my page is a .php page I'm able to just do this:

<h1 id="current-time-now" data-start="<?php echo time() ?>"></h1>

And then I can grab that timestamp and use it like this:

    //get new date from timestamp in data-start attr
    var freshTime = new Date(parseInt($("#current-time-now").attr("data-start"))*1000);
    //loop to tick clock every second
    var func = function myFunc() {
        //set text of clock to show current time
        $("#current-time-now").text(freshTime.toLocaleTimeString());
        //add a second to freshtime var
        freshTime.setSeconds(freshTime.getSeconds() + 1);
        //wait for 1 second and go again
        setTimeout(myFunc, 1000);
    };
    func();

From there you can run ajax calls to get fresh timestamps how ever often you feel is needed for your project.

Upvotes: 2

Tirth Patel
Tirth Patel

Reputation: 5736

You can use ajax.

timestamp.php

<?php
    date_default_timezone_set('YOUR TIMEZONE');
    echo $timestamp = date('H:i:s');

jQuery

$(document).ready(function() {
    setInterval(timestamp, 1000);
});

function timestamp() {
    $.ajax({
        url: 'http://localhost/timestamp.php',
        success: function(data) {
            $('#timestamp').html(data);
        },
    });
}

HTML

<div id="timestamp"></div>

Upvotes: 14

Terseus
Terseus

Reputation: 2212

PHP is a server-side programming language, Javascript is a client-side programming language.

The PHP code that fills the variables will only update when the webpage is loaded, after that you are left with Javascript code and nothing more.

I recommend you to search a basic programming book which mentions concepts such as client-side and server-side code because (and not trying to be harsh) you seems to have a big misunderstanding about how those things works.

Upvotes: 4

Related Questions