javascript / jquery time count down

Question

I want to make a function either using pure Javascript or also benefiting from jquery to count down to an ending time such as:

//consumes a javascript date object
function countDown(endtimme){
...
}

and it should display in html such as

<div id="time_left_box">
    <h1>Time remaining</h1>:

    <p>hours left: ..remaining day will be here## <p>
    <p>minutes left: ##remaining day will be here## <p>
    <p>seconds left: ##remaining day will be here## <p>
</div>

Indeed and it would be even more great if it can refresh itself every second.

I am very naive with javascript and confused about how to approach, any help would be appreciate.

Well, there are lots of little bits to the problem. Which ones are you having problems with? — Quentin
– Quentin, Commented Feb 8, 2010 at 13:22

marcgg · Accepted Answer · 2010-02-08 13:24:19Z

7

You could use jQuery Countdown

answered Feb 8, 2010 at 13:24

marcgg

66.8k53 gold badges183 silver badges238 bronze badges

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

Comments

Jeff Maes · Accepted Answer · 2010-02-08 13:25:30Z

5

Take a look at this one: http://keith-wood.name/countdown.html

answered Feb 8, 2010 at 13:25

Jeff Maes

7058 silver badges13 bronze badges

3 Comments

Jeff Maes Over a year ago

Yeah sorry ;-) I was just too late

Reigel Gallarde Over a year ago

I think the OP wants to make a function and not use a plugin.

marcgg Over a year ago

@reigel he's talking about using jquery in his question, so... well anyways it's up to the OP to be more precise here, he didn't even aknowledge @jeff's answer nor mine

Samuel · Accepted Answer · 2014-07-09 03:10:09Z

It can be done in JavaScript without plugins.

You need to get the current date time, down to the denominator that is one smaller than what you are displaying. With your example, this would mean you need to get everything down to milliseconds.

var currentTime = new Date(n.getFullYear(), n.getMonth(), n.getDate(), n.getHours(), n.getMinutes(), n.getSeconds(), n.getMilliseconds());

You then find the difference between now and the desired time. This is given to you in milliseconds.

var diff = endtime - currentTime;

Because this is returned in milliseconds you need to convert them into seconds, minutes, hours, days etc... This means establishing how many milliseconds are in each denominator. Then you are able to use mod and divide to return the number needed for each unit. See below.

var miliseconds = 1;
var seconds = miliseconds * 1000;
var minutes = seconds * 60;
var hours = minutes * 60;
var days = hours * 24;
var years = days * 365;

//Getting the date time in terms of units
//Floored so that they go together (to get just year/days/hours etc.. by themselves you need to use Math.round(diff/desired unit);
var numYears = Math.floor(diff / years);
var numDays = Math.floor((diff % years) / days);
var numHours = Math.floor((diff % days) / hours);
var numMinutes = Math.floor((diff % hours) / minutes);
var numSeconds = Math.round((diff % minutes) / seconds);

Once you have the denominators you want to display you can return this to the html page through different methods. For example:

document.getElementById("tyears").innerHTML = numYears;

That sums up your method. However, to make it run on a set interval (which is why you update the HTML display within the JavaScript function) you need to call the following function, giving your function name and provide your interval in terms of milliseconds.

//Call the count down timer function every second (measured in miliseconds)
setInterval(countDown(endtime), 1000);

Collectives™ on Stack Overflow

javascript / jquery time count down

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related