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 🙂
Comments are closed.