• Top Members
    Reps
    Posts
  • 834 Replies
    2585 Replies
  • 716 Replies
    2025 Replies
  • 331 Replies
    1928 Replies

Countdown Timer

User avatar
mikethedj4
VIP - Site Partner
Posts: 2577

Countdown Timer

Mon Sep 26, 2016 9:15 pm

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 :)
Image
Image

User avatar
CodenStuff
Site Admin
Posts: 4373

Re: Countdown Timer

Tue Sep 27, 2016 7:18 pm

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
Posts: 2577

Re: Countdown Timer

Thu Sep 29, 2016 7:44 am

Hahahaha I remember first learning this I struggled as well
Image
Image

Post Reply

Return to “Tutorials”