So you went to a site and you saw that awesome clock that updated in Real Time? And you tried to make it or duplicate it but only got a static one that updated the time then stopped? Well here my friends, we are going to discuss timers so you can make that awesome Real Time clock or anything else that involves timers. First off you must have already elementary knowledge of JavaScript and must know what objects are and how to use them.
Long ago, when JavaScript was still young, you were only allowed to use one-shot timers, meaning they worked once and it was over! Well when people started to use them in loops more then by themselves, then a timer was created that ran in intervals. So now lets talk about both. To create a one-shot timer that ran after 10 seconds you would just have to run:
Code:
<script>
window.setTimeout("alert('10 seconds have passed!')", 10000);
</script>
here you see that the first paramater passed to setTimeout is what to do and the second is the time, it is in milliseonds, meaning to get 1 second you have to put in 1000. if you know the amount of seconds, just multiply it by 1000 and you have it. Now the setTimeout only releases one bit on info, it's timer ID. Meaning to stop the timer you would have to know the timer ID, for example:
Code:
<script>
var ID = window.setTimeout("alert('haha 10 seconds!')", 10000);
window.setTimeout("clearTimeout(ID);alert('timer stopped')", 3000)
</script>
as you see we declare a variable called ID then we make it equal to the output of window.setTimeout. Then we make another one-shot timer that executes at 3 seconds, 7 seconds before the first and does clearTimeout(ID). clearTimeout(ID) stops the one-shot timer (that executes at 10 seconds). so now we know how to start and stop one-shot timers, we could loop them like this:
<script>
function timer() {
window.setTimeout("some_blah()", 1000);
}
function some_blah() {
alert("one second! Ha!");
timer()
}
</script>
This would loop it, but it is not convinient and not practical, so lets look at intervals. To make it so that it executes every 10 seconds and has a alert message saying "haha!" we would do:
Code:
<script>
setInterval("alert('haha!')", 10000)
</script>
This is alot like setTimeout right? Well yeah, but it's alot faster then looping it... And instead of clearTimeout we have clearInterval and they work the same. So you're thinking, yeah yeah yeah, shut up already and tell me how to make a real time clock. Ok here is a basic one that will show up at the bottom of the screen by using window.status and tells the user how long they have been on your site.
Code:
<html>
<body onload="window_Onload()">
<script>
var time=new Array(0,0,0)
function window_Onload()
{
setInterval("updateTime()",1000);
}
function updateTime()
{
time[0]++
if (time[0] >= 61)
{
time[1]++
time[0]=0
}
if (time[1] >= 61)
{
time[2]++
time[1]=0
}
window.status=time[2] + " hours, " + time[1] + " minutes, and " + time[0] + " seconds."
}
</script>
</body>
</html>
As you see every second it runs updateTime() and seconds increase and window.status is updated... Now you could easily make this so it shows the time, in Real Time, something like this would work.
Code:
<html>
<body onload="window_Onload()">
<script>
var date;
function window_Onload()
{
setInterval("updateTime()",1000);
}
function updateTime()
{
date=new Date()
window.status=date.getHours()+":"+date.getMinutes()+":"+date.getSeconds()
}
</script>
</body>
</html>
So now you got that awesome Real Time clock!
Now that you know how to use timers I am sure you can put this knowledge to good use.