timestamp countdown in javascript and php

Question

I need some help to code a script that counts down the days, hours, minutes and seconds from a unix timestamp.

timestamp is created with php

<? php echo hours ();?>

And I want the script to count down in real time with JavaScript.

Example 2 days, 3:15:39

Hope someone can help me a little:)

What, precisely, does <? php echo hours ();?> write into the document that javascript is supposed use for the count down? e.g is it seconds since the UNIX epoch? The number of seconds/minutes/hours whatever to count down? The time to count down to? What? — RobG
– RobG, Commented Aug 8, 2011 at 12:17

pimvdb · Accepted Answer · 2011-08-08 12:28:52Z

10

First you have some PHP errors. It should be e.g.

<?php echo time(); ?>

I'm using a timestamp in JavaScript for the ease of showing an example.

http://jsfiddle.net/pimvdb/AvXd3/

// the difference timestamp
var timestamp = (Date.now() + 1000 * 60 * 60 * 24 * 3) - Date.now();

timestamp /= 1000; // from ms to seconds

function component(x, v) {
    return Math.floor(x / v);
}

var $div = $('div');

setInterval(function() { // execute code each second

    timestamp--; // decrement timestamp with one second each second

    var days    = component(timestamp, 24 * 60 * 60),      // calculate days from timestamp
        hours   = component(timestamp,      60 * 60) % 24, // hours
        minutes = component(timestamp,           60) % 60, // minutes
        seconds = component(timestamp,            1) % 60; // seconds

    $div.html(days + " days, " + hours + ":" + minutes + ":" + seconds); // display

}, 1000); // interval each second = 1000 ms

answered Aug 8, 2011 at 12:28

pimvdb

155k80 gold badges313 silver badges357 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

RobG Over a year ago

setInterval will not run at exactly the specified interval and will slowly drift, so it will become out of sync with the system clock and occasionally skip two seconds. Much better to call setTimeout, calculating the time to about 20ms past the next full second. It may still skip, but only if the system is busy, not because of drift, and will mostly "tick" in sync with the system clock.

AllanRibas · Accepted Answer · 2024-03-28 00:21:45Z

I just refactored the code above

var limitDays = 1000 * 60 * 60 * 24 //"24 hours"
var days = 365
var expired = false

var currentTime = new Date()
console.log("set var [ now ] with this: ", currentTime.valueOf())
console.log("set var [ validity ] with this: ", createValidity())

function createValidity() {
    return days * limitDays
}

function component(x, v) {
    return Math.floor(x / v);
}

function getTimer(timestamp) {
    var interval = setInterval(function() {
        timestamp -= 1000
        var days = component(timestamp / 1000, 24 * 60 * 60),
            hours = component(timestamp / 1000, 60 * 60) % 24,
            minutes = component(timestamp / 1000, 60) % 60,
            seconds = component(timestamp / 1000, 1) % 60;

        document.getElementById('countdown').innerHTML = (days + " days " + hours + " hours " + minutes + " minutes " + seconds + " seconds")

        if (timestamp < 0) {
            console.log("expired")
            clearInterval(interval)
            getTimer(createValidity())
        }
    }, 1000)
}

var validity = 31536000000
var now = 1711578707493
var converter = (validity - (currentTime.valueOf() - now))
getTimer(converter)

<!DOCTYPE html>
<html>
 <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">  
    </head>
    <body> 
    <div id="countdown"></div>  
  </body>
</html>

Collectives™ on Stack Overflow

timestamp countdown in javascript and php

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related