Are you looking to build a timer script for your own personal website with HTML, JavaScript or php? Maybe a coming soon timer or a timer for promo sales in your e-commerce store, or even for your quiz website. Well, lucky for you because that’s the scope of this article and we’re going to use plain JavaScript to achieve this. Feel free to read as long as you want.

JavaScript countdown Timer minutes and seconds.

To start with, we’re going to build a JavaScript timer which displays in minutes and in seconds. This timer reduces every second when the timer finally gets to “00:00” an alert box will be displayed. This will be built entirely with plain JavaScript, no frameworks.

Countdown timer HTML and JavaScript.

Let’s begin with creating our div element with html which will contain our countdown timer.

<div id="countdowndiv">

</div>

Now that we’ve created the HTML, let’s move on to the scripting with JavaScript.

<script>

var min=1;

var sec=59;


//the count down function.


function countdown() {

//reduce seconds

sec--;

//set minute to reduce after second hits 0.

if(sec==0) {

min--;

//set seconds back to 59 seconds

sec=59;

//end timer and display alert when minute and second is zero.

if(min<=0) {

clearInterval (mycount);

//set minute and second to zero

min =0;
sec =0;

//display pop up alert.

alert ("countdown has ended");
}
}


//select countdown div

var countdiv= document. getElementById ("countdowndiv");


//display the countdown in the countdown div.

countdiv.innerHTML=min+":"+sec

}

var mycount = setInterval (countdown , 1000);

</script>

Let me make out time to explain the previous code. We first created a “div” element with html giving it an id “countdowndiv” which would be used in the with the JavaScript id selector.

Next, we defined our minutes and seconds variable. Which would be used as a starter for your JavaScript timer. Then we called the defined our count down function which does the entire work.

We used an if statement to set our seconds variable to reduce by one and if this seconds ever reaches 0, the minute would reduce by one and the seconds variable is set back to 59. That’s the main algorithm used in this count down. We also used the setInterval function to make the function repeat itself every 1000 milliseconds (1 second in your device time).

Finally, the clearInterval function was used if both the minutes and seconds variable ever reach zero simultaneously. This means that your timer is up and the function will stop recalling itself everytime. It also displays an alert box telling you that the count down is over.

Note: instead of an alert box, you can display anything you feel like. It’s your website and you alone is the boss.

If you’ve gone through our How to create a quiz website tutorial, you can add this timer to it and make your students feel the tension while answering your quiz.

How to Bypass JavaScript timer.

The JavaScript timer above is very good in handling alot of client side processes on your browser. But what if your in a situation that you can’t wait for the timer anymore. Don’t worry, I’ve written down the steps on how to skip a timer placed on a website.

There are two ways to handle this, the first one is very easy but not too efficient.

Putting off the browser’s JavaScript.

You can easily stop your timer and put off all JavaScript processed in the browser. Just navigate to your browser settings and put off all scripts handled by the browser. Now why isn’t this method efficient?

Remember I said that sometimes websites put on countdowns to display certain informations at a later time. What if they also wanted to display that information to you with JavaScript. You’ve simply blocked access to that information until you put the timer back on. Now let’s talk about the second more efficient method.

Using inspect tool to set the timer to last only one second.

If you can’t wait for the time to elapse, you can simply right click on the time and click inspect element in the menu that pops up. This takes you to the timer code and allows you to change anything you like. You can even set the timer to continue from 0 mins 1 seconds so you’ll only have to wait for one more second.

That’s all for how to build a JavaScript count down. You can leave a feedback for us in the comment section. Or email us at hello@charmingdesk.com.ng for a private reply.

Also follow us on social media to stay updated on any new post from us.

Kudos on your web development journey.

Your favorite web developers!


vic okeke

I'm just a web developer hoping to help out junior developers in algorithms for their projects.

0 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *