JavaScript Countdown

b65949db6d7cecca9a7820e9d87811a2

Ever have some text that you wanted a person to read before they submitted content to your site. Most of the time, the people just scroll to the bottom of the page and click the submit button. In the Web 2.0, people have added additional code to make sure that the person has read the text. I am for sure most of you have seen the sites where you have to scroll an entire div block in order to have a button enabled that you can then click to say you agree to something. In this tutorial we will do a similar delay, but this will be a delay that you have more control over than the user.

To create the delay we are going to use JavaScript. If you don’t know JavaScript try to follow along, and hopefully you will learn something about JavaScript before the end of the tutorial. First, think of the least amount of time you want the delay to occur, in the tutorial we are going to use about 15 seconds. Let’s call this variable tminus.

var tminus = 15;

Now to actually create the countdown, we will need to is create a function that can be loop and take the value away from the tminus variable. Let’s call this function countdown, since that is what it will be doing.

function countdown(){

}

Now that we have our function, let’s actually make it do something. Let’s have the function subtract 0.1 from value of tminus.

function countdown(){

tminus = tminus – 0.1;

}

Now, everytime the function is ran, it will reduce 0.1 from the value of tminus. The only issue with this, is that we can’t stop the timer at 0.0. To fix this issue we need to create an if statement that will tell the timer to stop when tminus gets to 0.1. You maybe asking why 0.1, well if we tell the timer to stop when tminus gets to 0.0, the function will execute one extra time, thus making the countdown go to 0.09, which we don’t want to happen.

function countdown(){

if (tminus >= 0.1){

tminus = tminus – 0.1;

}

If you were to run the code just as it is now, Javascript will make the value of tminus become something like 14.7000000003. Also if the number is a whole integer, like 14, then everything after the decimal point will not be displayed. We can fix both of these issues with a little code.

function countdown(){

if (tminus >= 0.1){

tminus = tminus – 0.1;

tminus = Math.round(tminus*100)/100

if (!(Math.round(tminus*100) % 100)){

tminus = tminus + “.0″;

}

}

That is a lot of code to digest at once, so lets go over it line by line. The first line that we added was the tminus = Math.round(tminus*100)/100. If you don’t know JavaScript that well it may have throw you off, but let’s break it down. JavaScript has a built in functions, a group of those functions are designed just for the use with numbers. Everyone on those functions start with Math followed by .function name. In this case, we are using the .round() function. The Math.round() function, rounds up to the nearest whole number. Since we are just needing the hundredth place after the decimal, we then multiple the value of tminus by 100, round to the nearest whole digit, then divide by 100. By dividing by 100, we get only the hundredth place.

To deal with the issue of zeros now showing up in the hundredth spot, we create a small if statement. This statement can be confusing if you don’t know JavaScript. The purpose of this if statement is to check to see if there are any reminders, and if there are not any reminders to add .0 to the end of tminus. The percent (%) sign is called the modulus in JavaScript. What is does is returns only the reminder in a division problem. So two divided by 2 will return a zero, where as three divided by two would return 5. So what we are doing is rounding to the nearest hundredth place, like we did to get only the hundredth place, then checking to see if it can be divided by 100. By using the not (!) operator, we are telling the JavaScript that if there is a remainder, do not do the following. This could also be written like the following, either way the statement is checking for the value.

if ((Math.round(tminus*100) % 100)==0)

When tminus value is zero we need to change the value of the button to Submit. To do that we will need to add an else statement to our function.

function countdown(){

if (tminus >= 0.1){

tminus = tminus – 0.1;

tminus = Math.round(tminus*100)/100

if (!(Math.round(tminus*100) % 100)){

tminus = tminus + “.0″;

}

}else {

tminus = “I Agree”;

}

}

By adding the else statement, we are changing the value of tminus to something completely different if it is less then or equal to 0.1. In this case, we are changing the value to the word I Agree, since we want to user click the button if they agree to the rules. There are just a few more things we have to add to the script to toggle the button, and to change the value of the button while the user is waiting.

if (tminus != “I Agree”){

document.countdown_form.countdown.disabled = true;

}else{

document.countdown_form.countdown.disabled = false;

}

This part of the code, will still be inside the function. It will allow us to check the value of tminus, and if tminus does not match the string (I Agree), then the element named countdown in the countdown_forum will be disabled. Once the value of tminus is set to I Agree, then the button will be enabled. Now for the part, of the code that makes the count down actually work.

document.getElementById(“countdown”).value=tminus;

setTimeout(“countdown();”, 100);

These two lines will go at the end of our code. The first line, just tells the JavaScript to update the value of the element that has the id countdown with the value of tminus. The next line uses another built in function of JavaScript. The setTimeout function is designed to perform something in a given time. In this case, we are telling setTimeout to run the countdown() function, every 100 milliseconds.

Now we will need to create the HTML to display the JavaScript output, and one more line of JavaScript to start the countdown function. Here is that code.

<form name=”countdown_form”>

<input type=”submit” id=”countdown” class=”countdown” disabled>

</form>

<script language=”javascript”>

<!–

countdown();

//–>

</script>

This code should be familiar if you know HTML. It is just a form with the button, we have given the button an id, and a class to apply any CSS that we would like to apply to it. We have also disabled the button with the disable option. The JavaScript part of the code is just telling the browser to run the JavaScript code. You can see the code above in action here.

About the Author: