源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

JavaScript计时器示例分析

  • 时间:2022-08-17 03:39 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:JavaScript计时器示例分析
[b]1.什么是JavaScript计时器?[/b] 在JavaScript中,我们可以在设定的时间间隔之后来执行代码,而不是在函数被调用后立即执行。 [b]2.计时器类型[/b] 一次性计时器:仅在指定的延迟时间之后触发一次。 间隔性触发计时器:每隔一定的时间间隔就触发一次 [b]3.计时器方法[/b] 1):一次性计时器 A):setTimeout(): 指定的延迟时间之后来执行代码,进执行一次 语法:setTimeout(代码,延迟时间); 参数说明: 1. 要调用的函数或要执行的代码串。 2. 延时时间:在执行代码前需等待的时间,以毫秒为单位(1s=1000ms)。 B):clearTimeout():取消setTimeout()设置 语法:clearTimeout(timer) 参数说明: timer:由 setTimeout() 返回的 ID 值。该值标识要取消的延迟执行代码块。 调用setTimeout()和clearTimeout()延迟方法:
[u]复制代码[/u] 代码如下:
<!DOCTYPE html> <html>     <head>         <meta charset="utf-8">         <title>JavaScript计时器</title>         <input type="button" value="开始" id="btnStart" onclick="StartPrint()">         <input type="button" value="暂停" id="btnStop" onclick="StopPrint()">         <br>     </head>     <body>         <script type="text/javascript">             //定义打印方法             function Print()             {                 console.log("我在打印!");             }             var timer;//该值标识要取消的延迟执行代码块             //开始打印             function StartPrint()             {                 timer=setTimeout(Print,1000);//调用计时器,延迟1秒打印,只执行一次             }             //结束打印             function StopPrint()             {                 clearTimeout(timer);//取消计时器             }         </script>     </body> </html>
调用setTimeout()和clearTimeout()无限循环方法:
[u]复制代码[/u] 代码如下:
<!DOCTYPE html> <html>     <head>         <meta charset="utf-8">         <title>JavaScript计时器</title>         <input type="button" value="开始" id="btnStart" onclick="StartPrint()">         <input type="button" value="暂停" id="btnStop" onclick="StopPrint()">         <br>     </head>     <body>         <script type="text/javascript">             //定义打印方法             function Print()             {                 console.log("我在打印!");                 timer=setTimeout(Print,1000);//开始计时器,调用自己,进行无穷循环             }             var timer;//该值表示要取消延迟执行的代码块             //开始打印             function StartPrint()             {                 Print();//调用打印方法             }             //结束打印             function StopPrint()             {                 clearTimeout(timer);//取消计时器             }         </script>     </body> </html>
  2):间隔性触发计时器 A):setInterval():在执行时,从载入页面后每隔指定的时间执行代码 语法:setInterval(代码,交互时间); 参数说明: 1. 代码:要调用的函数或要执行的代码串。 2. 交互时间:周期性执行或调用表达式之间的时间间隔,以毫秒计(1s=1000ms)。 返回值: 一个可以传递给 clearInterval() 从而取消对"代码"的周期性执行的值。 调用函数格式(假设有一个clock()函数): setInterval("clock()",1000) 或 setInterval(clock,1000) B):clearInterval() 方法可取消由 setInterval() 设置的交互时间 语法:clearInterval(timer) 参数说明: timer:由 setInterval() 返回的 ID 值。 调用setInterval()和clearInterval() 执行间隔执行方法实例
[u]复制代码[/u] 代码如下:
<!DOCTYPE html> <html>     <head>         <meta charset="utf-8">         <title>JavaScript计时器</title>         <input type="button" value="开始" id="btnStart" onclick="StartPrint()">         <input type="button" value="暂停" id="btnStop" onclick="StopPrint()">         <br>     </head>     <body>         <script type="text/javascript">             //定义打印方法             function Print()             {                 console.log("我在打印!");             }             var timer;//该值标识要取消的计时器执行代码块             //开始打印             function StartPrint()             {             timer=setInterval("Print()",1000);//开始计时器             }             //结束打印             function StopPrint()             {                 clearInterval(timer);;//取消计时器             }         </script>     </body> </html>
以上就是本文所述的全部内容了,希望小伙伴们能够喜欢。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部