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 相关文章推荐
又一个图片自动缩小的JS代码
Mar 10 Javascript
Ext 今日学习总结
Sep 19 Javascript
判断是否安装flash player及当前版本的JS代码
Aug 08 Javascript
一个JavaScript变量声明的知识点
Oct 28 Javascript
js实现各种复制到剪贴板的方法(分享)
Oct 27 Javascript
微信小程序  action-sheet详解及实例代码
Nov 09 Javascript
谈谈因Vue.js引发关于getter和setter的思考
Dec 02 Javascript
json字符串传到前台input的方法
Aug 06 Javascript
koa router 多文件引入的方法示例
May 22 Javascript
详解Vue之事件处理
Jul 10 Javascript
vue-openlayers实现地图坐标弹框效果
Sep 24 Javascript
Vue+axios封装请求实现前后端分离
Oct 23 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 session有效期问题
2009/04/26 PHP
php通过正则表达式记取数据来读取xml的方法
2015/03/09 PHP
php序列化函数serialize() 和 unserialize() 与原生函数对比
2015/05/08 PHP
PHP实现百度人脸识别
2019/05/06 PHP
Javascript 复制数组实现代码
2009/11/26 Javascript
让浏览器DOM元素最后加载的js方法
2014/07/29 Javascript
微信支付 JS API支付接口详解
2016/07/11 Javascript
JavaScript使用forEach()与jQuery使用each遍历数组时return false 的区别
2016/08/26 Javascript
关于js二维数组和多维数组的定义声明(详解)
2016/10/02 Javascript
jQuery 出现Cannot read property ‘msie’ of undefined错误的解决方法
2016/11/23 Javascript
vue中axios处理http发送请求的示例(Post和get)
2017/10/13 Javascript
vue--点击当前增加class,其他删除class的方法
2018/09/15 Javascript
vue文件运行的方法教学
2019/02/12 Javascript
vue-cli3项目展示本地Markdown文件的方法
2019/06/07 Javascript
[01:18:43]2014 DOTA2华西杯精英邀请赛5 24 iG VS DK
2014/05/25 DOTA
[36:13]Mineski vs iG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python中for循环详解
2014/01/17 Python
python中迭代器(iterator)用法实例分析
2015/04/29 Python
selenium python浏览器多窗口处理代码示例
2018/01/15 Python
python字符串常用方法
2018/06/14 Python
Python pycharm 同时加载多个项目的方法
2019/01/17 Python
python用match()函数爬数据方法详解
2019/07/23 Python
给我一面国旗 python帮你实现
2019/09/30 Python
pytorch AvgPool2d函数使用详解
2020/01/03 Python
windows10 pycharm下安装pyltp库和加载模型实现语义角色标注的示例代码
2020/05/07 Python
python 模拟登陆163邮箱
2020/12/15 Python
网页布局中CSS样式无效的十个重要原因详解
2017/08/10 HTML / CSS
基于MUI框架使用HTML5实现的二维码扫描功能
2018/03/01 HTML / CSS
印度在线杂货店:bigbasket
2018/08/23 全球购物
十佳大学生事迹材料
2014/01/29 职场文书
优秀教师获奖感言
2014/01/31 职场文书
离婚案件上诉状
2015/05/23 职场文书
政协常委会议主持词
2015/07/03 职场文书
心理健康教育培训研修感言
2015/11/18 职场文书
五年级语文教学反思
2016/03/03 职场文书
Python实现简单得递归下降Parser
2022/05/02 Python