javascript计时器事件使用详解
在JavaScritp中使用计时事件是很容易的,两个关键方法是:
setTimeout()
未来的某时执行代码
clearTimeout()
取消setTimeout()
setTimeout()
语法
vart=setTimeout("javascript语句",毫秒)
setTimeout()方法会返回某个值。在上面的语句中,值被储存在名为t的变量中。假如你希望取消这个setTimeout(),你可以使用这个变量名来指定它。
setTimeout()的第一个参数是含有JavaScript语句的字符串。这个语句可能诸如"alert("5seconds!")",或者对函数的调用,诸如alertMsg()"。
第二个参数指示从当前起多少毫秒后执行第一个参数。
提示:1000毫秒等于一秒。
当下面这个例子中的按钮被点击时,一个提示框会在5秒中后弹出。
<html>
<head>
<scripttype="text/javascript">
functiontimedMsg()
{
vart=setTimeout("alert("5seconds!")",5000)
}
</script>
</head>
<body>
<form>
<inputtype="button"value="Displaytimedalertbox!"onClick="timedMsg()">
</form>
</body>
</html>
实例-无穷循环
要创建一个运行于无穷循环中的计时器,我们需要编写一个函数来调用其自身。在下面的例子中,当按钮被点击后,输入域便从0开始计数。
<head> <body> </html> 语法 实例 下面的例子和上面的无穷循环的例子相似。唯一的不同是,现在我们添加了一个"StopCount!"按钮来停止这个计数器: <head> functiontimedCount() functionstopCount() <body> 语法: 实例: 说明:上面例子,执行效果是说每隔500ms就alert("hello"); 再来一个时钟: 如何停止,setInterval()方法?? TobeabletousetheclearInterval()method,youmustuseaglobalvariablewhencreatingtheintervalmethod: myVar=setInterval("javascriptfunction",milliseconds); 实例: }
<html>
<scripttype="text/javascript">
varc=0
vart
functiontimedCount()
{
document.getElementById("txt").value=c
c=c+1
t=setTimeout("timedCount()",1000)
}
</script>
</head>
<form>
<inputtype="button"value="Startcount!"onClick="timedCount()">
<inputtype="text"id="txt">
</form>
</body>
clearTimeout()
clearTimeout(setTimeout_variable)
<html>
<scripttype="text/javascript">
varc=0
vart
{
document.getElementById("txt").value=c
c=c+1
t=setTimeout("timedCount()",1000)
}
{
clearTimeout(t)
}
</script>
</head>
<form>
<inputtype="button"value="Startcount!"onClick="timedCount()">
<inputtype="text"id="txt">
<inputtype="button"value="Stopcount!"onClick="stopCount()">
</form>
</body>
</html>
另外两个重要的方法:
setInterval()
setInterval()-executesafunction,overandoveragain,atspecifiedtimeintervals
作用是:循环执行一个方法,在规定的间隔时间内
window.setInterval("javascriptfunction",milliseconds);
说明:第一个参数必须是一个函数,第二个参数是执行函数的间隔时间.
<html>
<scripttype="text/javascript">
setInterval(function(){alert("hello")},500);
</script>
</html>
<html>
<body>
<pid="demo"></p>
<scripttype="text/javascript">
setInterval(function(){myTimer()},1000);
function myTimer(){
vard=newDate();
vart=d.toLocaleTimeString();
document.getElementById("demo").innerHTML=t;
}
</script>
</body>
</html>
window.clearInterval()
语法:
window.clearInterval(intervalVariable)
Thewindow.clearInterval()methodcanbewrittenwithoutthewindowprefix.
ThenyouwillbeabletostoptheexecutionbycallingtheclearInterval()method.
<html>
<body>
<pid="demo"></p>
<pid="demo2"onclick="stop()">stop</p>
<scripttype="text/javascript">
vartemp=setInterval(function(){myTimer()},1000);
function myTimer(){
vard=newDate();
vart=d.toLocaleTimeString();
document.getElementById("demo").innerHTML=t;
}
functionstop(){
<html>
<body>
<pid="demo"></p>
<pid="demo2"onclick="stop()">stop</p>
<scripttype="text/javascript">
vartemp=setInterval(function(){myTimer()},1000);
function myTimer(){
vard=newDate();
vart=d.toLocaleTimeString();
document.getElementById("demo").innerHTML=t;
}
functionstop(){
clearInterval(temp);
}
</script>
</body>
</html>
</script>
</body>
</html>相关文章