Jump to content





Recent Status Updates

  • Photo
      10 Apr
    Poe

    Finally (and hopefully) i'm getting a team together that knows a little of this and a little of that; and maybe all my open source projects that are half written can begin to be released. :)

View All Updates
Photo
- - - - -

How to create a countdown timer in Javascript

timer countdown countdown timer innerhtml totalseconds

  • Please log in to reply
13 replies to this topic

#1 Vswe

Vswe

    CC Leader

  • Expert Member
  • PipPipPipPipPipPipPip
  • 1,989 posts
  • Programming Language:Java, C#, PHP, Python, JavaScript, PL/SQL, Visual Basic .NET, Lua, ActionScript

Posted 08 November 2009 - 04:04 AM

To create a countdown timer in JavaScript we will first need to make it tick with a interval of 1000 milliseconds (1 second). To do this we have to use the window.setTimeout function which will call a JavaScript function after a certain amount of time, like this:
 

 

window.setTimeout("Tick()", 1000);
function Tick() {
}
 

 

So this will call the function called Tick after 1000 milliseconds, but each time Tick is called we want to set the timer to 1 second to make the timer continue so therefor it should look like this:
 

 

window.setTimeout("Tick()", 1000);

function Tick() {
window.setTimeout("Tick()", 1000);
}
 

 


So now we've made the base of the timer, the function Tick will be called once each second. But we want to be able to use it to change the text of something to show the time, so we can change the above code to this:

 

 

var Timer;
var TotalSeconds;


function CreateTimer(TimerID, Time) {
Timer = document.getElementById(TimerID);
TotalSeconds = Time;

UpdateTimer()
window.setTimeout("Tick()", 1000);
}

function Tick() {
TotalSeconds -= 1;
UpdateTimer()
window.setTimeout("Tick()", 1000);
}

function UpdateTimer() {
Timer.innerHTML = TotalSeconds;
}
 

 


So we have one function where we're creating the timer by getting an ID of the element we want to be a timer and the seconds it should tick down from which is stored in Timer and TotalSeconds, then we call the function UpdateTimer and then call the function Tick with a delay of 1 second. Each time the function Tick is called it lowers the amount of seconds by one and Calls UpdateTimer and set a timeout on it self on 1000 milliseconds. The function UpdateTimer will set the timers content to be the amount of seconds left.

 

CSS Part 5: Advanced Topics

So the above example simply use one element to tick down once a second and display it in the element.

The HTML for using it looks like this (if the above code is saved in /Timer.js):
 

 

<html>
<head>
<script type="text/javascript" src="/Timer.js" />
</head>

<body>
<div id='timer' />
<script type="text/javascript">window.onload = CreateTimer("timer", 30);</script>
</body>
</html>
 

 


The div above is our timer and the row below it will start the timer at 30 seconds.

But there's two more things we should add, first thing is that our timer should stop at 0, not continuing to negative values as it do now, to fix this we'll change the Tick function to this:
 

 

function Tick() {
if (TotalSeconds <= 0) {
alert("Time's up!")
return;
}

TotalSeconds -= 1;
UpdateTimer()
window.setTimeout("Tick()", 1000);
}
 

 


So if the timer has reached 0 (or just to be sure is below 0) we do what we want to happen when the time reaches 0 (in this case showing an alert box) and the use return to exit the function. By exiting the function here the timer will stop since we'll exit the function before the line with window.setTimeout.

 

JavaScript:Code Snow


The other thing we need to add is the conversion from seconds to seconds, minutes, hours and maybe days since now it only show the amount of seconds left, to fix this we have to change the UpdateTimer function to something like this:
 

 

function UpdateTimer() {
var Seconds = TotalSeconds;

var Days = Math.floor(Seconds / 86400);
Seconds -= Days * 86400;

var Hours = Math.floor(Seconds / 3600);
Seconds -= Hours * (3600);

var Minutes = Math.floor(Seconds / 60);
Seconds -= Minutes * (60);


var TimeStr = ((Days > 0) ? Days + " days " : "") + LeadingZero(Hours) + ":" + LeadingZero(Minutes) + ":" + LeadingZero(Seconds)


Timer.innerHTML = TimeStr;
}


function LeadingZero(Time) {

return (Time < 10) ? "0" + Time : + Time;

}
 

 


In the UpdateTimer function we now stores the TotalSeconds' value in a variable called Seconds and extracting the days, hours and minutes from it so there's only the seconds left. Then we store everything as a string called TimeStr, if the days is greater then 0 we adds them in the beginning. On the hours, minutes and seconds we're using a function called LeadinZero, it will return the hours, minutes or seconds with a leading 0 if they only had one number before. This will make the output something like this:
 

 

00:02:26
 

 


Instead of this:
 

 

0:2:26
 

 


Then we just set the Timer's text to be the value of TimeStr. If you want you can replace this line:
 

 

Timer.innerHTML = TimeStr;
 

 


with something like this:
 

 

Timer.innerHTML = TimeStr + " until my birthday!";
 

 

This was everything about "How to create a countdown timer in Javascript". Hope you'll find this useful. :)

 

We also have a few discussions on this:

Need help with Countdown timer

javascript countdown timer


Edited by Roger, 25 February 2013 - 04:27 PM.

  • 4

#2 Guest_Jordan_*

Guest_Jordan_*
  • Guest

Posted 08 November 2009 - 03:23 PM

Nicely done! Did you use this in the CC game?

+rep
  • 0

#3 Vswe

Vswe

    CC Leader

  • Expert Member
  • PipPipPipPipPipPipPip
  • 1,989 posts
  • Programming Language:Java, C#, PHP, Python, JavaScript, PL/SQL, Visual Basic .NET, Lua, ActionScript

Posted 08 November 2009 - 10:57 PM

Nicely done! Did you use this in the CC game?

+rep


Yes I did :)
  • 0

#4 BlaineSch

BlaineSch

    CC Leader

  • Expert Member
  • PipPipPipPipPipPipPip
  • 1,559 posts

Posted 09 November 2009 - 08:47 AM

Very nice!
  • 0

#5 amrosama

amrosama

    CC Mentor

  • VIP Member
  • PipPipPipPipPipPipPipPip
  • 2,764 posts

Posted 09 November 2009 - 09:23 AM

nice work VSWE :D
++++Rep
  • 0
yo homie i heard you like one-line codes so i put a one line code that evals a decrypted one line code that prints "i love one line codes"
eval(base64_decode("cHJpbnQgJ2kgbG92ZSBvbmUtbGluZSBjb2Rlcyc7"));
www.amrosama.com | the unholy methods of javascript

#6 debtboy

debtboy

    CC Devotee

  • Just Joined
  • PipPipPipPipPipPip
  • 499 posts

Posted 10 November 2009 - 05:16 PM

Simple and useful +rep :)
  • 0

#7 developercrowd

developercrowd

    CC Lurker

  • Just Joined
  • Pip
  • 3 posts

Posted 02 December 2009 - 07:53 AM

Great Ideas from a great minds

hahah greatly done..please pay me a visit on my forum to discuss some brainstorming
  • 0

#8 Egz0N

Egz0N

    CC Leader

  • Expert Member
  • PipPipPipPipPipPipPip
  • 1,155 posts

Posted 02 December 2009 - 08:12 AM

Great One .. +rep
  • 0

#9 codesc.ws

codesc.ws

    CC Lurker

  • Just Joined
  • Pip
  • 3 posts

Posted 27 April 2010 - 04:18 PM

Thanks for this. Helped a lot!
  • 0

#10 nadee158

nadee158

    CC Lurker

  • Just Joined
  • Pip
  • 1 posts

Posted 04 June 2011 - 07:36 AM

Thanks a lot for this. :thumbup1: Great work!
  • 0

#11 VakhoQ

VakhoQ

    CC Addict

  • Advanced Member
  • PipPipPipPipPip
  • 126 posts

Posted 09 June 2011 - 11:58 AM

very good. You can also make a timer like this:
Posted Image

its not very difficult :)
  • 0
GNU/Linux Is the Best.

#12 VakhoQ

VakhoQ

    CC Addict

  • Advanced Member
  • PipPipPipPipPip
  • 126 posts

Posted 23 May 2012 - 01:21 AM

if you are insterested in i can show you how to build animation clock using CSS and JS
  • 0
GNU/Linux Is the Best.





Also tagged with one or more of these keywords: timer, countdown, countdown timer, innerhtml, totalseconds