JavaScript 计时器

JavaScript 计时器在 JavaScript 中 我们可以在设定的时间间隔之后来执行代码 而不是在函数被调用后立即执行 计时器类型 一次性计时器 仅在指定的延迟时间之后触发一次 间隔性触发计时器 每隔一定的时间间隔就触发一次 计时器方法 计时器 setInterval 在执行时 从载入页面后每隔指定的时间执行代码 语法 setInterval 代码 交互时间 参数说明 1 代码 要调用的函数或要执行的代码串 2 交互时间 周期性执行或调用表达式之间的时间间隔 以毫秒计 1s 1000ms 返回

计时器setInterval()

setInterval(代码,交互时间); 

参数说明

1. 代码:要调用的函数或要执行的代码串。 2. 交互时间:周期性执行或调用表达式之间的时间间隔,以毫秒计(1s=1000ms)。 

返回值:

一个可以传递给 clearInterval() 从而取消对”代码”的周期性执行的值。

调用函数格式(假设有一个clock()函数):

setInterval("clock()",1000)setInterval(clock,1000) 

我们设置一个计时器,每隔100毫秒调用clock()函数,并将时间显示出来,代码如下:

 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>计时器 
     title> <script type="text/javascript"> var int=setInterval(clock, 100) function clock(){ 
      var time=new Date(); document.getElementById("clock").value = time; }  
      script>  
       head> <body> <form> <input type="text" id="clock" size="50" />  
        form>  
         body>  
          html> 

取消计时器clearInterval()

clearInterval() 方法可取消由 setInterval() 设置的交互时间。

语法:

clearInterval(id_of_setInterval) 

参数说明:

 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>计时器 
     title> <script type="text/javascript"> function clock(){ 
      var time=new Date(); document.getElementById("clock").value = time; } // 每隔100毫秒调用clock函数,并将返回值赋值给i var i=setInterval("clock()",100);  
      script>  
       head> <body> <form> <input type="text" id="clock" size="50" /> <input type="button" value="Stop" onclick="clearInterval(i)" />  
        form>  
         body>  
          html> 

计时器setTimeout()

setTimeout()计时器,在载入后延迟指定时间后,去执行一次表达式,仅执行一次。

语法:

setTimeout(代码,延迟时间); 

参数说明:

  1. 要调用的函数或要执行的代码串。
  2. 延时时间:在执行代码前需等待的时间,以毫秒为单位(1s=1000ms)。

当我们打开网页3秒后,在弹出一个提示框,代码如下:

 <html> <head> <script type="text/javascript"> setTimeout("alert('Hello!')", 3000 );  
     script>  
      head> <body>  
       body>  
        html> 

当按钮start被点击时,setTimeout()调用函数,在5秒后弹出一个提示框。

 <html> <head> <script type="text/javascript"> function tinfo(){ 
     var t=setTimeout("alert('Hello!')",5000); }  
     script>  
      head> <body> <form> <input type="button" value="start" onClick="tinfo()">  
       form>  
        body>  
         html> 

要创建一个运行于无穷循环中的计数器,我们需要编写一个函数来调用其自身。在下面的代码,当按钮被点击后,输入域便从0开始计数。

 <html> <head> <script type="text/javascript"> var num=0; function numCount(){ 
     document.getElementById('txt').value=num; num=num+1; setTimeout("numCount()",1000); }  
     script>  
      head> <body> <form> <input type="text" id="txt" /> <input type="button" value="Start" onClick="numCount()" />  
       form>  
        body>  
         html> 

取消计时器clearTimeout()

setTimeout()和clearTimeout()一起使用,停止计时器。

语法:

clearTimeout(id_of_setTimeout) 

下面的例子和上节的无穷循环的例子相似。唯一不同是,现在我们添加了一个 “Stop” 按钮来停止这个计数器:

 <html> <head> <script type="text/javascript"> var num=0,i; function timedCount(){ 
     document.getElementById('txt').value=num; num=num+1; i=setTimeout(timedCount,1000); } setTimeout(timedCount,1000); function stopCount(){ 
     clearTimeout(i); }  
     script>  
      head> <body> <form> <input type="text" id="txt"> <input type="button" value="Stop" onClick="stopCount()">  
       form>  
        body>  
         html> 
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/203281.html原文链接:https://javaforall.net

(0)
上一篇 2026年3月19日 下午10:10
下一篇 2026年3月19日 下午10:11


相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号