JavaScript Timing Events
The setTimeout() Method
The clearTimeout() Method
with javascript, it is possible to execute some code after a specified time interval.
This is called timing events
setTimeout() - Execute a code some time in the future
clearTimeout() - cancels thesetTimeout()
the setTimeout() and clearTimeout() are both methods of HTML DOM Window object.
The setTimeout() Method
var t=setTimeout("javascript statement","milliseconds");
the setTimeout method returns a value.
In the preceding statement, the value is stored in a variable called t.
If you want to cancel this setTimeout(), you can refer to it using the variable name.
The first parameter of setTimeout() is a string that contains a JavaScript statement.
This statement could be a statement like "alert('5 seconds!')" or a call to a function, like "alertMsg()".
THe second parameter indicates how many milliseconds from now you want to execute the first parameter.
there are 1000 milliseconds in 1 second
<html>
<head>
<script type="text/javascript">
function timedMsg()
{
var t=setTimeout("alert('I am displayed after 3 seconds!')",3000);
}
</script>
</head>
<body>
<form>
<input type="button" value="Display alert box!" onClick="timedMsg()"/>
</form>
</body>
</html>
To get timer to work in an infinite loop, you must write a function that calls itself.
when a button is clicked, the input field starts to count (forever) starting at 0.
Notice that you also have a function that checks whether the timer is already running, to avoid creating additional timers if the button is clicked more than once.
<html>
<head>
<script type="text/javascript">
var c=0;
var t;
var timer_is_on = 0;
function timedCount()
{
document.getElementById('txt').value=c;
c=c+1;
t=setTimerout("timedCount()",1000);
}
function doTimer()
{
if(!timer_is_on)
{
timer_is_on=1;
timedCount();
}
}
</script>
</head>
<body>
<form>
<input type="button" value="start count!" onClick="doTimer()">
<input type="text" id="txt">
</form>
<p>Click on the button above. The input field will count forever, starting at 0.</p>
</body>
</html>
simple timing usiong setTimeout() method
<html>
<head>
<script type="text/javascript">
function timedText()
{
var t1=setTimeout("document.getElementById('txt').value='2 seconds!'",2000);
var t2=setTimeout("document.getElementById('txt').value='4 seconds!'",4000);
var t3=setTimeout("document.getElementById('txt').value='6 seconds!'",6000);
}
</script>
</head>
<body>
<form>
<input type="button" value="Display timed text!" onClick="timedText()"/>
<input type="text" id="txt"/>
</form>
<p>Click on the button above. The input field will tell you when two,four, and six seconds have passed.</p>
</body>
</html>
show a clock created with a timing event
<html>
<head>
<script type="text/javascript">
function startTime()
{
var today=new Date();
var h=today.getHours();
var m=today.getMinutes();
var s=taday.getSeconds();
//add a zero in front of numbers<10
m=checkTime(m);
s=checkTime(s);
document.getElementById('txt').innerHTML=h+":"+m+":"+s;
t=setTimeout('startTime()',500);
}
function checkTime(i)
{
if(i<10)
{
i="0"+i;
}
return i;
}
</script>
</head>
<body onload="startTime()">
<div id="txt"></div>
</body>
</html>
The clearTimeout() Method
clearTimeout(setTimeout_variable)
<html>
<head>
<script type="text/javascript">
var c=0;
var t;
var timer_is_on = 0;
function timedCount()
{
document.getElementById('txt').value=c;
c=c+1;
t=setTimeout("timedCount()",1000);
}
function doTimer()
{
if(!timer_is_on)
{
timer_is_on=1;
timedCount();
}
}
function stopCount()
{
ClearTimeout(t);
timer_is_on=0;
}
</script>
</head>
<body>
<form>
<input type="button" value="start count!" onClick="doTimer()">
<input type="text" id="txt">
<input type="button" value="stop count!" onClick="stopCount()">
</form>
<p>Click on the "start count!" button above to start the timer. The input field will count forever, starting at 0. Click on the "Stop count!" button to stop the counting. Click on the "Start count!" button to start the timer agine.</p>
</body>
</html>
The setTimeout() Method
The clearTimeout() Method
with javascript, it is possible to execute some code after a specified time interval.
This is called timing events
setTimeout() - Execute a code some time in the future
clearTimeout() - cancels thesetTimeout()
the setTimeout() and clearTimeout() are both methods of HTML DOM Window object.
The setTimeout() Method
var t=setTimeout("javascript statement","milliseconds");
the setTimeout method returns a value.
In the preceding statement, the value is stored in a variable called t.
If you want to cancel this setTimeout(), you can refer to it using the variable name.
The first parameter of setTimeout() is a string that contains a JavaScript statement.
This statement could be a statement like "alert('5 seconds!')" or a call to a function, like "alertMsg()".
THe second parameter indicates how many milliseconds from now you want to execute the first parameter.
there are 1000 milliseconds in 1 second
<html>
<head>
<script type="text/javascript">
function timedMsg()
{
var t=setTimeout("alert('I am displayed after 3 seconds!')",3000);
}
</script>
</head>
<body>
<form>
<input type="button" value="Display alert box!" onClick="timedMsg()"/>
</form>
</body>
</html>
To get timer to work in an infinite loop, you must write a function that calls itself.
when a button is clicked, the input field starts to count (forever) starting at 0.
Notice that you also have a function that checks whether the timer is already running, to avoid creating additional timers if the button is clicked more than once.
<html>
<head>
<script type="text/javascript">
var c=0;
var t;
var timer_is_on = 0;
function timedCount()
{
document.getElementById('txt').value=c;
c=c+1;
t=setTimerout("timedCount()",1000);
}
function doTimer()
{
if(!timer_is_on)
{
timer_is_on=1;
timedCount();
}
}
</script>
</head>
<body>
<form>
<input type="button" value="start count!" onClick="doTimer()">
<input type="text" id="txt">
</form>
<p>Click on the button above. The input field will count forever, starting at 0.</p>
</body>
</html>
simple timing usiong setTimeout() method
<html>
<head>
<script type="text/javascript">
function timedText()
{
var t1=setTimeout("document.getElementById('txt').value='2 seconds!'",2000);
var t2=setTimeout("document.getElementById('txt').value='4 seconds!'",4000);
var t3=setTimeout("document.getElementById('txt').value='6 seconds!'",6000);
}
</script>
</head>
<body>
<form>
<input type="button" value="Display timed text!" onClick="timedText()"/>
<input type="text" id="txt"/>
</form>
<p>Click on the button above. The input field will tell you when two,four, and six seconds have passed.</p>
</body>
</html>
show a clock created with a timing event
<html>
<head>
<script type="text/javascript">
function startTime()
{
var today=new Date();
var h=today.getHours();
var m=today.getMinutes();
var s=taday.getSeconds();
//add a zero in front of numbers<10
m=checkTime(m);
s=checkTime(s);
document.getElementById('txt').innerHTML=h+":"+m+":"+s;
t=setTimeout('startTime()',500);
}
function checkTime(i)
{
if(i<10)
{
i="0"+i;
}
return i;
}
</script>
</head>
<body onload="startTime()">
<div id="txt"></div>
</body>
</html>
The clearTimeout() Method
clearTimeout(setTimeout_variable)
<html>
<head>
<script type="text/javascript">
var c=0;
var t;
var timer_is_on = 0;
function timedCount()
{
document.getElementById('txt').value=c;
c=c+1;
t=setTimeout("timedCount()",1000);
}
function doTimer()
{
if(!timer_is_on)
{
timer_is_on=1;
timedCount();
}
}
function stopCount()
{
ClearTimeout(t);
timer_is_on=0;
}
</script>
</head>
<body>
<form>
<input type="button" value="start count!" onClick="doTimer()">
<input type="text" id="txt">
<input type="button" value="stop count!" onClick="stopCount()">
</form>
<p>Click on the "start count!" button above to start the timer. The input field will count forever, starting at 0. Click on the "Stop count!" button to stop the counting. Click on the "Start count!" button to start the timer agine.</p>
</body>
</html>
No comments:
Post a Comment