JavaScript计时器示例分析

1.什么是JavaScript计时器?

在JavaScript中,我们可以在设定的时间间隔之后来执行代码,而不是在函数被调用后立即执行。

2.计时器类型

一次性计时器:仅在指定的延迟时间之后触发一次。
间隔性触发计时器:每隔一定的时间间隔就触发一次

3.计时器方法

1):一次性计时器

A):setTimeout(): 指定的延迟时间之后来执行代码,进执行一次

语法:setTimeout(代码,延迟时间);

参数说明:

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

B):clearTimeout():取消setTimeout()设置

语法:clearTimeout(timer)

参数说明:
timer:由 setTimeout() 返回的 ID 值。该值标识要取消的延迟执行代码块。

调用setTimeout()和clearTimeout()延迟方法:

复制代码 代码如下:

<!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()无限循环方法:

复制代码 代码如下:

<!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() 执行间隔执行方法实例

复制代码 代码如下:

<!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>

以上就是本文所述的全部内容了,希望小伙伴们能够喜欢。

时间: 2015-02-02

VB倒计时器和JS当前时间

VBscript做计时器,遇到一个问题,怎么在页面上不断的调用一个VB函数呢.... 例如倒计时,如何让秒数在不刷新的情况下走动... 想了好久,查了好多地方都是用JavaScript做的... 最后才发现了一个,是VBscript帮助上都没有说的..SetTimeOut属性..真晕哦.. 倒计时如下. 倒计时 sec=2 min=1 hou=0 SetTimeOut "SpareTime()",1000 sub SpareTime() if sec=0 and min=0 and h

原生js实现秒表计时器功能

本文实例为大家分享了带有开始.暂停.清除功能的js计时器,供大家参考,具体内容如下 效果图: 下面贴代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>计时器</title> <script> var hour,minute,second;//时 分 秒 hour=minute=secon

JS 页面计时器示例代码

复制代码 代码如下: <html> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <head> <script type="text/javascript"> var c=0 var t function timedCount() { document.getElementById('txt').value

javascript实现计时器的简单方法

计时器, 在生活当中也是用得频繁的功能, 比如锻炼身体, 跑步比赛等等相关的活动. 我们用Javascript来完成一个计时器. 计时器, 主要就是对时间的一个逻辑处理, 比如60秒等于1分钟, 60分钟等于一个小时, 我们这里只做到小时的处理. 就这么一个简单的逻辑, 然后动态的显示在一个Input里面. 那现在我们来完成这个界面 <label>计时:</label> <input type="text" name="" id=&qu

JavaScript分秒倒计时器实现方法

本文实例讲述了JavaScript分秒倒计时器实现方法.分享给大家供大家参考.具体分析如下: 一.基本目标 在JavaScript设计一个分秒倒计时器,一旦时间完成使按钮变成不可点击状态 具体效果如下图,为了说明问题,调成每50毫秒也就是每0.05跳一次表, 真正使用的时候,把window.onload=function(){...}中的setInterval("clock.move()",50);从50调成1000即可. 在时间用完之前,按钮还是可以点击的. 时间用完之后,按钮就不能

javascript设计简单的秒表计时器

本文实例讲述了javascript设计简单的秒表计时器的实现代码.分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下: <html> <head> <title> New Document </title> </head> <body> <form action="somepage.asp"> <input type="text" value="0&q

javascript计时器详解

计时器 基本格式: 复制代码 代码如下: setInterval(function(){代码},1000): /* 说明:1.setInterval 会返回一个计时器ID值 可以这样接收.var setId = setInterval(....); 2.接收setId的目的是为了清空计时器. clearTimeout(setId); */ 例如 一次性的计时器 格式: 复制代码 代码如下: setTimeout(function(){代码},1000) 案例: 复制代码 代码如下: var se

Node.js中使用计时器定时执行函数详解

如果你熟悉客户端JavaScript编程,你可能使用过setTimeout和setInterval函数,这两个函数允许延时一段时间再运行函数.比如下面的代码, 一旦被加载到Web页面,1秒后会在页面文档后追加"Hello there": 复制代码 代码如下: var oneSecond = 1000 * 1; // one second = 1000 x 1 ms setTimeout(function() { document.write('<p>Hello there.

javascript计时器事件使用详解

在 JavaScritp 中使用计时事件是很容易的,两个关键方法是: setTimeout()未来的某时执行代码 clearTimeout()取消setTimeout()setTimeout()语法 复制代码 代码如下: var t=setTimeout("javascript语句",毫秒) setTimeout() 方法会返回某个值.在上面的语句中,值被储存在名为 t 的变量中.假如你希望取消这个 setTimeout(),你可以使用这个变量名来指定它.setTimeout() 的第

javascript实现的简单计时器

最近写了很多微信端的互动小游戏,比如下雪花 限时点击 赢取奖品,限时拼图,限时答题等,都是些限时'游戏'(其实算不上游戏,顶多算是具有一点娱乐性的小互动而已) 上面出现了4个限时,对,没错,这里记录的就是最近写的 '计时器' ... 恩 , 计时器 就一个setInterval 或 setTimeout 即可实现 ,代码不会超过十行! 但是不防抱着没事找事的心态,来写个能复用的计时器 1.能倒计时 也能顺计时 2.复位.暂停.停止,启动功能 //计时器 window.timer = (funct

JS使用setInterval实现的简单计时器功能示例

本文实例讲述了JS使用setInterval实现的简单计时器功能.分享给大家供大家参考,具体如下: 使用setInterval实现计时,并且满60秒向分钟进一,满60分钟向小时进一. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>www.jb51.net JS计时器</title> <script> window.onload =

JavaScript实现的简单幂函数实例

本文实例讲述了JavaScript实现的简单幂函数.分享给大家供大家参考.具体实现方法如下: function PowerCalculator(base,power) { var number = base; if(power == 1) return number; if(power == 0) return 1; for(var i=2;i<=power;i++) { number = number * base; } return number; } 希望本文所述对大家的javascrip

JavaScript实现非常简单实用的下拉菜单效果

本文实例讲述了JavaScript实现非常简单实用的下拉菜单效果.分享给大家供大家参考.具体如下: 这是一款实用的JS下拉菜单,鼠标移上菜单就显示出二级菜单,是从其它网站上整理下来的,修改花了不少时间,现在去除了一些无用代码,更简洁了,而且代码兼容性似乎也表现不错,这款两级下拉菜单,基本是由CSS和JavaScript共同实现的,真的挺简洁实用. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-down-show-menu-code

javascript实现非常简单的小数取整功能示例

本文实例讲述了javascript实现非常简单的小数取整功能.分享给大家供大家参考,具体如下: JS核心代码: function truncateNumber(n){ return n|0; } 用法示例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JS小数取整</title> </head&

javascript单例模式的简单实现方法

本文实例讲述了javascript单例模式的简单实现方法.分享给大家供大家参考.具体实现方法如下: function SingeInstance(){ if(!SingeInstance._instance) SingeInstance._instance=this; return SingeInstance._instance; } var obj1=new SingeInstance(); var obj2=new SingeInstance(); console.log(obj1===ob

JavaScript实现的简单拖拽效果

本文实例讲述了JavaScript实现的简单拖拽效果.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

javascript数组克隆简单实现方法

本文实例讲述了javascript数组克隆简单实现方法.分享给大家供大家参考,具体如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>新建网页 1</title> </head> <body> <script language=javascri

JavaScript实现的简单烟花特效代码

本文实例讲述了JavaScript实现的简单烟花特效代码.分享给大家供大家参考,具体如下: 这是一款JavaScript烟花特效,过年的时候放到你的网页上祝贺大家牛年大吉吧,是不是很不错? 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-yh-explode-style-demo/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &

javascript闭包概念简单解析(推荐)

关于"闭包"这个概念的文章在网上铺天盖地,基本已经稀烂了,但是有时候总感觉读了这么多的文章还是云山雾罩,当然是由于它本身就比较难于理解和涉及的知识较多,还有一个很重要的原因就是网上很多教程介绍可能存在一定的误区,或者说侧重点不同,下面就通过代码实例简单的介绍一下什么是闭包. 代码实例一: function a(){ var webName="我们"; console.log(webName); } a() 以上是一段非常简单的代码,当函数执行结束之后,它就会从内存中