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 相关文章推荐
判断多个元素(RADIO,CHECKBOX等)是否被选择的原理说明
Feb 18 Javascript
JavaScript函数模式详解
Nov 07 Javascript
jQuery 1.9.1源码分析系列(十四)之常用jQuery工具
Dec 02 Javascript
javascript中加var和不加var的区别 你真的懂吗
Jan 06 Javascript
jQuery 自定义下拉框(DropDown)附源码下载
Jul 22 Javascript
基于WebUploader的文件上传js插件
Aug 19 Javascript
原生js仿jquery实现对Ajax的封装
Oct 04 Javascript
Angular实现响应式表单
Aug 04 Javascript
详解VueJs中的V-bind指令
May 03 Javascript
JS实现横向轮播图(初级版)
Jun 24 Javascript
微信小程序拖拽排序列表的示例代码
Jul 08 Javascript
微信小程序实现底部弹出框
Nov 18 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中计算未知长度的字符串哪个字符出现的次数最多的代码
2012/08/14 PHP
Mac版PhpStorm之XAMPP整合apache服务器配置的图文教程详解
2016/10/13 PHP
laravel 5.3 单用户登录简单实现方法
2019/10/14 PHP
$.get获取一个文件的内容示例代码
2013/09/11 Javascript
超赞的动手创建JavaScript框架的详细教程
2015/06/30 Javascript
JS实现仿新浪微博发布内容为空时提示功能代码
2015/08/19 Javascript
认识Knockout及如何使用Knockout绑定上下文
2015/12/25 Javascript
javascirpt实现2个iframe之间传值的方法
2016/06/30 Javascript
详解js数组的完全随机排列算法
2016/12/16 Javascript
Node.js 8 中的重要新特性
2017/06/28 Javascript
angular2 ng build部署后base文件路径问题详细解答
2017/07/15 Javascript
使用InstantClick.js让页面提前加载200ms
2017/09/12 Javascript
vue.js 使用axios实现下载功能的示例
2018/03/05 Javascript
js将键值对字符串转为json字符串的方法
2018/03/30 Javascript
解决layer图标icon不加载的问题
2019/09/04 Javascript
vue-quill-editor插入图片路径太长问题解决方法
2021/01/08 Vue.js
python的staticmethod与classmethod实现实例代码
2018/02/11 Python
Python 实现输入任意多个数,并计算其平均值的例子
2019/07/16 Python
Python命令行click参数用法解析
2019/12/19 Python
详解用Python调用百度地图正/逆地理编码API
2020/07/02 Python
python实现数字炸弹游戏程序
2020/07/17 Python
Python读取pdf表格写入excel的方法
2021/01/22 Python
matplotlib源码解析标题实现(窗口标题,标题,子图标题不同之间的差异)
2021/02/22 Python
Html5实现移动端、PC端 刮刮卡效果
2016/06/30 HTML / CSS
集世界奢侈品和设计师品牌的意大利精品买手店:Tessabit
2019/08/17 全球购物
环境工程求职简历的自我评价范文
2013/10/24 职场文书
中学教师培训制度
2014/01/31 职场文书
城市精细化管理实施方案
2014/03/04 职场文书
2014年政教处工作总结
2014/12/20 职场文书
写给老师的感谢信
2015/01/20 职场文书
团委工作总结2015
2015/04/02 职场文书
新教师2015年度工作总结
2015/07/22 职场文书
高考百日冲刺决心书
2015/09/23 职场文书
导游词之珠海轮廓
2019/10/25 职场文书
Python中json.dumps()函数的使用解析
2021/05/17 Python
Redis 彻底禁用RDB持久化操作
2021/07/09 Redis