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 相关文章推荐
来自chinaz的ajax获取评论代码
May 03 Javascript
禁止JQuery中的load方法装载IE缓存中文件的方法
Sep 11 Javascript
jquery中动态效果小结
Dec 16 Javascript
node.js中的buffer.slice方法使用说明
Dec 10 Javascript
javascript实现获取浏览器版本、浏览器类型
Dec 02 Javascript
Vue.js快速入门教程
Sep 07 Javascript
浅谈react.js 之 批量添加与删除功能
Apr 17 Javascript
JavaScript实现简单的四则运算计算器完整实例
Apr 28 Javascript
Vue.js 事件修饰符的使用教程
Nov 01 Javascript
vue中如何去掉空格的方法实现
Nov 09 Javascript
关于JavaScript 数组你应该知道的事情(推荐)
Apr 10 Javascript
Layui Table js 模拟选中checkbox的例子
Sep 03 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下统计用户在线时间的一种尝试
2010/08/26 PHP
PHP 简易输出CSV表格文件的方法详解
2013/06/20 PHP
Server.HTMLEncode让代码在页面里显示为源代码
2013/12/08 PHP
设置php页面编码的两种方法示例介绍
2014/03/03 PHP
set_exception_handler函数在ThinkPHP中的用法
2014/10/31 PHP
CodeIgniter记录错误日志的方法全面总结
2016/05/17 PHP
PHP实现网站应用微信登录功能详解
2019/04/11 PHP
关于B/S判断浏览器断开的问题讨论
2008/10/29 Javascript
JavaScript 基础篇之运算符、语句(二)
2012/04/07 Javascript
浅谈JavaScript的全局变量与局部变量
2016/06/10 Javascript
jQuery Easyui Datagrid实现单行的上移下移及保存移动的结果
2016/08/15 Javascript
jQuery validate插件功能与用法详解
2016/12/15 Javascript
Bootstrap提示框效果的实例代码
2017/07/12 Javascript
vue在手机中通过本机IP地址访问webApp的方法
2018/08/15 Javascript
jQuery的ztree仿windows文件新建和拖拽功能的实现代码
2018/12/05 jQuery
新手如何快速理解js异步编程
2019/06/24 Javascript
vue3.0自定义指令(drectives)知识点总结
2020/12/27 Vue.js
python读取文本中数据并转化为DataFrame的实例
2018/04/10 Python
Linux下python与C++使用dlib实现人脸检测
2018/06/29 Python
对Python 两大环境管理神器 pyenv 和 virtualenv详解
2018/12/31 Python
在cmd中查看python的安装路径方法
2019/07/03 Python
Python实现元素等待代码实例
2019/11/11 Python
pytorch 实现将自己的图片数据处理成可以训练的图片类型
2020/01/08 Python
django自带的权限管理Permission用法说明
2020/05/13 Python
一款纯css3实现的竖形二级导航的实例教程
2014/12/11 HTML / CSS
CSS3制作苹果风格键盘特效
2015/02/26 HTML / CSS
世界顶级俱乐部的官方球衣和套装:Subside Sports
2018/04/22 全球购物
戴尔英国翻新电脑和电子产品:Dell UK Refurbished Computers
2019/07/30 全球购物
门卫岗位职责
2013/11/15 职场文书
党员批评与自我批评
2014/02/12 职场文书
入学申请自荐信范文
2014/02/26 职场文书
学校学习雷锋活动总结
2014/07/03 职场文书
小学优秀教师材料
2014/12/15 职场文书
七一表彰大会简报
2015/07/20 职场文书
2015年度工程师评职称工作总结
2015/10/14 职场文书
初二英语教学反思
2016/02/15 职场文书