Javascript JQuery countdown timer

Question

I'm trying to create a simple countdown timer to a date/time.

I currently only have the following days to go script which is working fine:

<div id="countdown">

today = new Date();
BigDay = new Date("March 29, 2013");
msPerDay = 24 * 60 * 60 * 1000 ;
timeLeft = (BigDay.getTime() - today.getTime());
e_daysLeft = timeLeft / msPerDay;
daysLeft = Math.floor(e_daysLeft);
document.write(daysLeft + " days to go!");

</div>

I'm now trying to create a full countdown timer (with hours, minutes and seconds) and have created the following script. The html isn't showing on the page.

var today = new Date();
var BigDay = new Date("29 03 2013, 14:30:00");
var msPerDay = 24 * 60 * 60 * 1000 ;
var timeLeft = (BigDay.getTime() - today.getTime());
var e_daysLeft = timeLeft / msPerDay;
var daysLeft = Math.floor(e_daysLeft);
var e_hrsLeft = (e_daysLeft - daysLeft)*24;
var hrsLeft = Math.floor(e_hrsLeft);
var e_minsLeft = (e_hrsLeft - hrsLeft)*60;
var minsLeft = Math.floor(e_minsLeft);
var e_secsLeft = (e_minsLeft - minsLeft)*1000;
var secsLeft = Math.floor(e_secsLeft);
var timeString = daysLeft + " : " + hrsLeft + " : " + minsLeft + " : " + secsLeft;

$('document').ready(function(){

window.setInterval(function(){
$('#countdown').html(timeString);
}, 1000);

});

I'm not sure what the problem might be. The first script is contained within the html, the second is an external js file.

Edit: html is now showing however all values are displayed as NaN.

BTW, there's an extra opening bracket in var minsLeft = Math.floor((e_minsLeft); What does your console say? — isotrope
– isotrope, Commented Mar 14, 2013 at 14:53
That improved it. It's now showing in html but the values are each showing as NaN. — Razzildinho
– Razzildinho, Commented Mar 14, 2013 at 14:55

Arun P Johny · Accepted Answer · 2013-03-14 14:59:21Z

12

Other than the mentioned syntax errors there are logical errors also, you need to calculate the remaining time string inside the timeout function otherwise the values are calculated only on page load.

$(function(){
    var BigDay = new Date("29 Mar 2013, 14:30:00");
    var msPerDay = 24 * 60 * 60 * 1000 ;


    window.setInterval(function(){
        var today = new Date();
        var timeLeft = (BigDay.getTime() - today.getTime());

        var e_daysLeft = timeLeft / msPerDay;
        var daysLeft = Math.floor(e_daysLeft);

        var e_hrsLeft = (e_daysLeft - daysLeft)*24;
        var hrsLeft = Math.floor(e_hrsLeft);

        var e_minsLeft = (e_hrsLeft - hrsLeft)*60;
        var minsLeft = Math.floor(e_minsLeft);

        var e_secsLeft = (e_minsLeft - minsLeft)*60;
        var secsLeft = Math.floor(e_secsLeft);


        var timeString = daysLeft + " : " + hrsLeft + " : " + minsLeft + " : " + secsLeft;
        $('#countdown').html(timeString);
    }, 1000);
})

Demo: Fiddle

answered Mar 14, 2013 at 14:59

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

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

5 Comments

Arun P Johny Over a year ago

there was another problem with the seconds calculation, you were using (e_minsLeft - minsLeft)*1000 actually it should be (e_minsLeft - minsLeft)*60

Razzildinho Over a year ago

I had actually seen that last error just after I posted but forgot to edit.

Varun S Over a year ago

May God bless you Arun Johny.

Abude Over a year ago

@ArunPJohny if i want to pass the BigDay as a php string, it's not working; tried this : jsfiddle.net/85CNW , but didn't work, what am i doing wrong? many thanks!

Abude Over a year ago

@ArunPJohny any advice please?

couzzi · Accepted Answer · 2013-03-14 14:53:25Z

0

You have an error here: var minsLeft = Math.floor((e_minsLeft);

The first parenthesis isn't closed, should be var minsLeft = Math.floor(e_minsLeft);

answered Mar 14, 2013 at 14:53

couzzi

6,3563 gold badges26 silver badges41 bronze badges

Comments

xManh · Accepted Answer · 2013-03-14 14:53:57Z

0

because you didn't run the timeString calculation every second so the text within your #countdown div will never change

answered Mar 14, 2013 at 14:53

xManh

673 bronze badges

1 Comment

Razzildinho Over a year ago

So the entire function needs to be within the setInterval?

Collectives™ on Stack Overflow

Javascript JQuery countdown timer

3 Answers 3

5 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related