JavaScript定时器设置、使用与倒计时案例详解


Posted in Javascript onJuly 08, 2019

本文实例讲述了JavaScript定时器设置、使用与倒计时案例。分享给大家供大家参考,具体如下:

1、设置定时器

定时器,适用于定时执行的任务中。在BOM的window对象中,有这样的两个函数是用于设置定时器

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++);
    window.setTimeout('time()',1000);
  }
  window.setTimeout('time()',1000);
</script>

4、倒计时案例

在页面上有一个按钮,显示的是倒计时的数字,每隔一秒修改数字,等到0秒时,就切换爆炸图片。

效果图

JavaScript定时器设置、使用与倒计时案例详解
JavaScript定时器设置、使用与倒计时案例详解

代码

<!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 = window.setInterval('time()',1000);//开启定时器
</script>
</html>

思路

其实这个例子挺简单的,首先以每隔1秒开启定时器,在定时执行函数中每次获取当前倒计时的数字,然后进行减1操作,最后又赋值到按钮中,当数字小于或等于0秒时,就切换爆炸图片已达到爆炸效果,此时不要忘记取消定时器了。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
利用jQuery的$.event.fix函数统一浏览器event事件处理
Dec 21 Javascript
jquery操作checkbox实现全选和取消全选
May 02 Javascript
angularjs的一些优化小技巧
Dec 06 Javascript
jquery中trigger()无法触发hover事件的解决方法
May 07 Javascript
jquery显示loading图片直到网页加载完成的方法
Jun 25 Javascript
基于jQuery实现文本框只能输入数字(小数、整数)
Jan 14 Javascript
js HTML5 Canvas绘制转盘抽奖
Sep 13 Javascript
vue实现页面加载动画效果
Sep 19 Javascript
JavaScript中的垃圾回收与内存泄漏示例详解
May 02 Javascript
Vue.js+cube-ui(Scroll组件)实现类似头条效果的横向滚动导航条
Jun 24 Javascript
layui 选择列表,打勾,点击确定返回数据的例子
Sep 02 Javascript
微信小程序canvas开发水果老虎机的思路详解
Feb 07 Javascript
Vue实现拖放排序功能的实例代码
Jul 08 #Javascript
JavaScript中Dom操作实例详解
Jul 08 #Javascript
JavaScript实现五子棋游戏的方法详解
Jul 08 #Javascript
ES6 Class中实现私有属性的一些方法总结
Jul 08 #Javascript
ElementUI Tag组件实现多标签生成的方法示例
Jul 08 #Javascript
利用不到200行代码写一款属于你自己的js类库
Jul 08 #Javascript
Vue中util的工具函数实例详解
Jul 08 #Javascript
You might like
php中将网址转换为超链接的函数
2011/09/02 PHP
使用GD库生成带阴影文字的图片
2015/03/27 PHP
PHP多进程编程总结(推荐)
2016/07/18 PHP
Yii支持多域名cors原理的实现
2018/12/05 PHP
javascript 面向对象全新理练之数据的封装
2009/12/03 Javascript
cument.execCommand()用法深入理解
2012/12/04 Javascript
无刷新上传文件并返回自定义值
2015/06/11 Javascript
jQuery mobile在页面加载时添加加载中效果 document.ready 和window.onload执行顺序比较
2016/07/14 Javascript
AngularJS中一般函数参数传递用法分析
2016/11/22 Javascript
基于jQuery实现的打字机效果
2017/01/16 Javascript
详解前端构建工具gulpjs的使用介绍及技巧
2017/01/19 Javascript
关于JavaScript中forEach和each用法浅析
2017/07/27 Javascript
JS实现统计字符串中字符出现个数及最大个数功能示例
2018/06/04 Javascript
nodejs中方法和模块用法示例
2018/12/24 NodeJs
JavaScript制作3D旋转相册
2020/08/02 Javascript
Vue实现仿iPhone悬浮球的示例代码
2020/03/13 Javascript
JavaScript 异步时序问题
2020/11/20 Javascript
Vue+penlayers实现多边形绘制及展示
2020/12/24 Vue.js
[38:51]2014 DOTA2国际邀请赛中国区预选赛 Orenda VS LGD-CDEC
2014/05/22 DOTA
python网络编程实例简析
2014/09/26 Python
Python常见字符串操作函数小结【split()、join()、strip()】
2018/02/02 Python
Python中list循环遍历删除数据的正确方法
2019/09/02 Python
Python Pandas 对列/行进行选择,增加,删除操作
2020/05/17 Python
Python接口测试文件上传实例解析
2020/05/22 Python
Html5 webview元素定位工具的实现
2020/08/07 HTML / CSS
欧洲最大的化妆品连锁公司:Douglas道格拉斯
2017/05/06 全球购物
个性大学生自我评价
2013/12/04 职场文书
在校生自我鉴定
2014/01/23 职场文书
英语故事演讲稿
2014/04/29 职场文书
司法局火灾防控方案
2014/06/05 职场文书
四查四看整改措施
2014/09/19 职场文书
查摆问题整改措施范文
2014/10/11 职场文书
老公出轨后的保证书
2015/05/08 职场文书
企业宣传语大全
2015/07/13 职场文书
禁毒主题班会教案
2015/08/14 职场文书
css3手动实现pc端横向滚动
2022/06/21 HTML / CSS