你会不会在开发项目的过程中遇到这样的问题, 经常会有一些计时器或者定时器功能需求, 还有一些需要倒计时功能, 针对以上的问题小猿圈 web 前端讲师分享给大家 JavaScript 定时器与倒计时案例详解, 希望对于学习中的你, 有一定的帮助.
1, 设置定时器
定时器, 适用于定时执行的任务中. 在 BOM 的 Windows 对象中, 有这样的两个函数是用于设置定时器
- setTimeout(function,delay);// 设置延时多少毫秒执行该函数, 只执行一次, 返回值是一个 id
- setInterval(function,delay);// 设置间隔多少毫米一直执行该函数, 执行多次, 返回值是一个 id
两者的区别就在于 setTimeout 方式只执行一次, 而 setInterval 理论可以执行无数次, 直到其被取消.
2, 取消定时器
上面说过, 在开启定时器会返回一个 id, 这个 id 是用来区别开启的多个定时器. 当我们要取消定时器时, 可以使用一下这两个方法.
- clearTimeout(id);// 取消由 setTimeout 方式开启的定时器
- clearInterval(id);// 取消由 setInterval 方式开启的定时器
3, 循环调用 setTimeout
在使用中, 可以用 setTimeout 方式来实现 setInterval 的效果, 其实这个让我想起了当初学 Android 是的 Handler 机制, 发一个延时消息, 然后在内容中再发出消息. 例如:
- <script>
- var t = 1;
- function time() {
- console.log(t++);
- Windows.setTimeout('time()', 1000);
- }
- Windows.setTimeout('time()', 1000);
- </script>
4, 倒计时案例
在页面上有一个按钮, 显示的是倒计时的数字, 每隔一秒修改数字, 等到 0 秒时, 就切换爆炸图片.
代码
- <!DOCTYPE html>
- <HTML>
- <head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <title>
- </title>
- <link rel="stylesheet" href="">
- </head>
- <body>
- <h1>
- 炸弹效果
- </h1>
- <input type="button" value="5" />
- <br/>
- <img src="warn.jpg" />
- </body>
- <script>
- // 定时执行
- function time() {
- var input = document.getElementsByTagName('input')[0]; // 获取按钮中的数字
- var time = parseInt(input.value) - 1;
- input.value = time;
- // 爆炸操作
- if (time <= 0) {
- var img = document.getElementsByTagName('img')[0];
- img.src = 'boom.jpg'; // 切换爆照图片
- clearInterval(t1); // 清除定时器
- }
- }
- var t1 = Windows.setInterval('time()', 1000); // 开启定时器
- </script>
- </HTML>
思路
其实这个例子挺简单的, 首先以每隔 1 秒开启定时器, 在定时执行函数中每次获取当前倒计时的数字, 然后进行减 1 操作, 最后又赋值到按钮中, 当数字小于或等于 0 秒时, 就切换爆炸图片已达到爆炸效果, 此时不要忘记取消定时器了.
来源: http://www.jianshu.com/p/bdea3e6cc0b5