With JavaScript, it is possible to execute some code after a specified time interval.
This is called timing events.
It’s very easy to time events in JavaScript. The two key methods that are used are
as follows:
8 setTimeout()—Executes a code some time in the future
8 clearTimeout()—Cancels the setTimeout()
the settimeout() method
The syntax is as follows:
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 state-ment. 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.
The setTimeout()and clearTimeout()are both methods of the
HTML DOM Window object.
When the button is clicked in the following example, an alert box is displayed after
3 seconds.
Try it yourself >>
<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 a timer to work in an infinite loop, you must write a function that calls itself.
In the following example, 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 run-ning, to avoid creating additional timers if the button is clicked more than once.
There are 1000 milliseconds in 1 second. nOt e
Figure 26.1
Learn JavaScript and ajax with w3schools
146
Try it yourself >>
<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();
}
}
</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 for-ever, starting at 0.</p>
</body>
</html>
The following example is another simple timing using the setTimeout() method.
Your results are shown in Figure 26.3.
Try it yourself >>
<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>
The following example shows a clock created with a timing event.
Your results are shown in Figure 26.4.
Try it yourself >>
<html>
<head>
<script type="text/javascript">
function startTime()
{
var today=new Date();
var h=today.getHours();
var m=today.getMinutes();
var s=today.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
The syntax is as follows:
clearTimeout(setTimeout_variable)
Try it yourself >>
<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()
{
Learn JavaScript and ajax with w3schools
150
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 again.
</p>
</body>
</html>
This is called timing events.
It’s very easy to time events in JavaScript. The two key methods that are used are
as follows:
8 setTimeout()—Executes a code some time in the future
8 clearTimeout()—Cancels the setTimeout()
the settimeout() method
The syntax is as follows:
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 state-ment. 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.
The setTimeout()and clearTimeout()are both methods of the
HTML DOM Window object.
When the button is clicked in the following example, an alert box is displayed after
3 seconds.
Try it yourself >>
<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 a timer to work in an infinite loop, you must write a function that calls itself.
In the following example, 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 run-ning, to avoid creating additional timers if the button is clicked more than once.
There are 1000 milliseconds in 1 second. nOt e
Figure 26.1
Learn JavaScript and ajax with w3schools
146
Try it yourself >>
<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();
}
}
</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 for-ever, starting at 0.</p>
</body>
</html>
The following example is another simple timing using the setTimeout() method.
Your results are shown in Figure 26.3.
Try it yourself >>
<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>
The following example shows a clock created with a timing event.
Your results are shown in Figure 26.4.
Try it yourself >>
<html>
<head>
<script type="text/javascript">
function startTime()
{
var today=new Date();
var h=today.getHours();
var m=today.getMinutes();
var s=today.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
The syntax is as follows:
clearTimeout(setTimeout_variable)
Try it yourself >>
<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()
{
Learn JavaScript and ajax with w3schools
150
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 again.
</p>
</body>
</html>
0 comments:
Post a Comment