html倒计时timer,JavaScript定时器设置、使用与倒计时案例详解
本文实例讲述了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机制,发一个延时消息,然后在内容中再发出消息。例如:
var t = 1;
function time(){
console.log(t++);
window.setTimeout('time()',1000);
}
window.setTimeout('time()',1000);
4、倒计时案例
在页面上有一个按钮,显示的是倒计时的数字,每隔一秒修改数字,等到0秒时,就切换爆炸图片。
效果图
代码
炸弹效果
//定时执行
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);//开启定时器
思路
其实这个例子挺简单的,首先以每隔1秒开启定时器,在定时执行函数中每次获取当前倒计时的数字,然后进行减1操作,最后又赋值到按钮中,当数字小于或等于0秒时,就切换爆炸图片已达到爆炸效果,此时不要忘记取消定时器了。
希望本文所述对大家JavaScript程序设计有所帮助。
html倒计时timer,JavaScript定时器设置、使用与倒计时案例详解相关推荐
- 使用JavaScript创建音乐播放器的案例详解
英文 | https://www.geeksforgeeks.org/create-a-music-player-using-javascript/?ref=leftbar-rightbar 翻译 | ...
- c语言 定时器作用,单片机定时器的作用及使用方法详解
单片机定时器的作用及使用方法详解 单片机定时器在单片机的功能是很重要的,它一般被用作定时功能,来做定时检测.定时响应和定时控制,并且可以产生毫秒宽的脉冲信号来驱动步进电机.计时和计数的最终功能是通过计 ...
- android 实现毫秒定时器,Android实现定时器的五种方法实例详解
一.Timer Timer是Android直接启动定时器的类,TimerTask是一个子线程,方便处理一些比较复杂耗时的功能逻辑,经常与handler结合使用. 跟handler自身实现的定时器相比, ...
- js onscroll android,JavaScript触发onScroll事件的函数节流详解
问题描述 常见的网站布局,顶部一个导航栏,我们假设本页面共有四个栏目:分别为A.B.C.D,我们点击A,锚点跳转至A栏目,同时顶部的A按钮高亮:点击B,锚点跳转至B栏目,同时顶部的B按钮高亮:我们在M ...
- devexpress 中的checkboxlist怎么设置间距_HTML中怎么设置h1的字体样式你知道吗?关于设置h1标签的样式详解
本篇文章主要为大家讲解了html中的h1标签的样式解析,但是如果不用css样式来做的话,那就只能在html4.01中显示了,所以我们还是尽快学习css层叠样式表吧,好了,现在让我们来说说这篇文章吧. ...
- 好程序员前端教程之JavaScript闭包和匿名函数的关系详解...
好程序员前端教程之JavaScript闭包和匿名函数的关系详解 本文讲的是关于JavaScript闭包和匿名函数两者之间的关系,从匿名函数概念到立即执行函数,最后到闭包.下面一起来看看文章分析,希望你 ...
- php导航默认选中,html中关于select标签如何设置默认选中的选项详解
方法有两种. 第一种通过的属性来设置选中项,此方法可以在动态语言如php在后台根据需要控制输出结果.< select id = "sel" > < option ...
- 3种Javascript图片预加载的方法详解
3种Javascript图片预加载的方法详解 预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度. 这对图片画廊及图片占据很大比例 ...
- javascript写css样式,原生javascript实现读写CSS样式的方法详解
原生javascript实现读写CSS样式的方法详解 发布于 2017-05-24 15:05:31 | 120 次阅读 | 评论: 0 | 来源: 网友投递 JavaScript客户端脚本语言Jav ...
最新文章
- 目标检测(Google object_detection) API 上训练自己的数据集
- 联合登陆【支付宝、网易、QQ】
- memcachedb 加 memcached engine无法提高 示例检索的查询速度
- shell的logo含义_Shell(壳牌石油)标志历史
- php 车牌号,总结关于车牌注意点
- 土地利用转移矩阵制作
- 科来网络分析系统简介
- 西安80转2000坐标系重新定义投影
- 2022注册测绘师备考开始 还在不知所措?手把手教你怎么考?
- Linux——MySQL分表分区
- 如何越狱苹果TV2在iOS 4.2使用PwnageTool
- 目标检测入门实战:贪吃蛇小游戏
- ( “树” 之 BST) 109. 有序链表转换二叉搜索树 ——【Leetcode每日一题】
- 遍历HashMap的几种常用方法
- Oracle命令结束,更新语句oracle - ORA-00933:SQL命令未正确结束
- [效率提升]webstorm配置Prettier:代码自动格式,格式化时清除空行,修改使用代码模板
- java保留小数点后7位,不够补0,去小数点存库,带小数点展示
- 百度图片咋这么多不和谐的图片??
- <力扣(LeetCode)>141、环形链表(链表基础解法)java
- 985学计算机的博士生好找工作吗,985博士去“专科”当老师,月薪6000挤破门槛,本科生该何去何从...