SetInterval is a very usefull function when making webpages that should look ‘alive’. I am here going to make a countdown timer using the setInterval and clearInterval functions:
First we need two variables:
var clock = 10; //Start value of counter var countdownId = 0; // Id of counter
Now we need the countdown function to call every interval:
function countdown() { if(clock > 0) { clock = clock - 1; document.getElementById('cdDiv').innerHTML = clock; } else { // Stop timer clearInterval(countdownId); } }
Now we need a div to show the timer in:
<div id="cdDiv">10</div>
Now we put it all togheter:
<html> <head> <title>My little countdown timer</title> <script type="text/javascript"> var clock = 10; var countdownId = 0; function start() { //Start clock countdownId = setInterval("countdown()", 1000); } function countdown(){ if(clock > 0){ clock = clock - 1; document.getElementById('cdDiv').innerHTML = clock; } else { //Stop clock clearInterval(countdownId); } } </script> </head> <body onload="start()"> <div id="cdDiv">10</div> </body> </html>
This small example is mostly so I remember the clearInterval function name which keeps escaping me 🙂