Countdown Timer

3 posts Page 1 of 1
Contributors
User avatar
mikethedj4
VIP - Site Partner
VIP - Site Partner
Posts: 2592
Joined: Thu Mar 25, 2010 4:36 am

Countdown Timer
mikethedj4
See It In Action - https://mikethedj4.github.io/kodeWeave/ ... 73f5a42ab6

Here we go a pretty basic tutorial.

We're going to be using setInterval for our timer.
Code: Select all
var interval = setInterval(countDown, 1000);
Notice inside of setInterval a function called countDown() is being called.
In this function, we're going to change the text or HTML of an element to show the current countdown number.
When it reaches 0 we're going to clear the interval and tell the user they're being redirected.

Full Javascript:
Code: Select all
var interval, count = 5;

countDown()
interval = setInterval(countDown, 1000);

function countDown() {
  document.body.innerHTML = count;
  if(count === 0) {
    clearInterval(interval)
    document.body.innerHTML = "Redirecting to .....";
  } else {
    count--;
  }
}
As you can see it's that easy :)
User avatar
CodenStuff
Site Admin
Site Admin
Posts: 4389
Joined: Tue Aug 04, 2009 1:47 am

Re: Countdown Timer
CodenStuff
A basic timer but I like it.

I'm embarrassed to say that I struggled with setinterval when I was trying to get our site scripts working :teehe;

Nice little tutorial :D
Welcome to CodenStuff.com Learn Code, Love Code. Thank you for being a member of the community.
User avatar
mikethedj4
VIP - Site Partner
VIP - Site Partner
Posts: 2592
Joined: Thu Mar 25, 2010 4:36 am

Re: Countdown Timer
mikethedj4
Hahahaha I remember first learning this I struggled as well
3 posts Page 1 of 1
Return to “Tutorials”