Send php date to javascript and increment it

Question

I want to get the server time using php, and pass it to a javascript variable. Once it is passed, it will increment.

Here is my code:

function initTime(date){
var today=new Date(date);
var h=today.getHours();
var m=today.getMinutes();
var s=today.getSeconds();
m = checkTime(m);
s = checkTime(s);
document.getElementById('time').innerHTML = h+":"+m+":"+s;
}
function checkTime(i) {
if (i<10) {i = "0" + i};  // add zero in front of numbers < 10
return i;
}

Situation: The user browse welcome page, the server time is sent and received by javascript.

I want to increment it, to make it a clock script. I don't want to get the server time every second using php, because it will use more server resources.

How can I increment it using javascript?

Just `echo` your server time directly as a value for your JavaScript variable. — Spencer Wieczorek, Apr 14 '15 at 13:33
possible duplicate of [javascript clock with server time](http://stackoverflow.com/questions/7780758/javascript-clock-with-server-time) — Paul Zepernick, Apr 14 '15 at 13:39
I got the server time correctly. My problem is, How Can i increment it? For example, i got, 21:33:01, I want to make it 21:33:02 after a minute. — Pinas De Radio, Apr 14 '15 at 13:43

Dovre · Answer 1 · 2015-04-27T12:46:54.247

1

You can put your php variable in an hidden input :

<input id="your_input" value="<?php echo $my_var; ?>">

and get it in javascript with :

my_var = document.getElementById('your_input').value;

edited Apr 27 '15 at 12:46

answered Apr 14 '15 at 13:24

Dovre

71
1
10

score 1 · Answer 2 · answered Apr 14 '15 at 13:24

1

Two ways. First, using moment.js:

setInterval(function() {
    document.getElementById('time').innerHTML = moment().format('HH:mm:ss');
},1000);

or using your function:

function initTime(date){
var today=new Date(date);
var h=today.getHours();
var m=today.getMinutes();
var s=today.getSeconds();
m = checkTime(m);
s = checkTime(s);
document.getElementById('time').innerHTML = h+":"+m+":"+s;
}
function checkTime(i) {
if (i<10) {i = "0" + i};  // add zero in front of numbers < 10
return i;
}

setInterval(initTime(date),1000);

answered Apr 14 '15 at 13:24

baao

71,625
17
143
203

It still not changing. – Pinas De Radio Apr 14 '15 at 13:31
What does the console log? – baao Apr 14 '15 at 13:32
I got the server time correctly. My problem is, How Can i increment it? For example, i got, 21:33:01, I want to make it 21:33:02 after a minute – Pinas De Radio Apr 14 '15 at 13:43

score 1 · Answer 3 · edited May 23 '17 at 11:58

1

I found another question that was basically after the same thing. The initialized the JS date using the milliseconds from php:

<script type="text/javascript">
    var d = new Date(<?php echo time() * 1000 ?>);
</script>

Here is a jQuery clock plugin that you can use that you can feed a starting time to(your server time). Putting it all together, it would go something like this:

<script type="text/javascript">
    var d = new Date(<?php echo time() * 1000 ?>);
    $("#clock").clock({"timestamp":d.getTime()});
</script>

edited May 23 '17 at 11:58

Community

1
1

answered Apr 14 '15 at 13:30

Paul Zepernick

1,452
1
11
25

1

If you believe the questions are asking the same think flag it as a duplicate. – Spencer Wieczorek Apr 14 '15 at 13:36

score 1 · Accepted Answer · answered Apr 14 '15 at 13:34

You can just output the PHP date somewhere, either in a global variable, or as a data attribute somewhere you can get it

<div id="time" data-now="<?php echo time() * 1000; ?>"></div>

and then

var elem  = document.getElementById('time');
var timer = setInterval(initTime, 1000);

function initTime() {
    var time = +(elem.getAttribute('data-now')),
    time = time + 1000; // add one second

    var today = new Date( time ),
        h = today.getHours(),
        m = today.getMinutes(),
        s = today.getSeconds();

        m = checkTime(m);
        s = checkTime(s);

    elem.innerHTML = h + ":" + m + ":" + s;
    elem.setAttribute('data-now', today.getTime());
}

function checkTime(i) {
    if (i < 10) {
        i = "0" + i
    }; // add zero in front of numbers < 10
    return i;
}

FIDDLE

Send php date to javascript and increment it

4 Answers4