定时器setTimeout和setInterval的简单应用

本文简单利用定时器setTimeout和setInterval举了两个小栗子：定时炸弹和1-100递增

代码如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>13-14定时器</title><style>em {font-style: normal;}</style>
</head><body><h2>@定时器</h2><!-- ----------------------------------13-------------------------------------------------------------- --><br><h3>13 在页面上显示10秒的倒计时， 然后显示“ boom!!!”</h3><em id="p1">定时器开启,10S倒计时开始:</em><em id="p2"></em><script>var count1 = 10var changeP = document.querySelector("#p1")var changeP2 = document.querySelector("#p2")// 设定一个10s的定时器setTimeout(function () {changeP.innerText = "噫吁嚱,要boom了!!!"},10 * 1000)// 设定一个10s倒计时var timer = setInterval(function () {--count1changeP2.innerText = count1if (count1 === 0) {clearInterval(timer)count1 = 10}}, 1000)</script><!-- ----------------------------------14-------------------------------------------------------------- --><br><h3>14 每秒产生并打印递增的自然数1、 2、 3...，直到100为止， 点击按钮暂停 / 继续</h3><em id="em4">倒递增的自然数</em><button id="btnClear">暂停</button><script>var em4 = document.querySelector("#em4")var btnClear = document.querySelector("#btnClear")var count = 1var timerId = null// 开始倒计时function startAutoPlay() {if (!timerId) {timerId = setInterval(function countNumber() {em4.innerText = count++if (count === 100) {clearInterval(timer)count = 0}},1000)}}startAutoPlay()// 给按钮绑定事件委托，实现暂停/继续的功能btnClear.addEventListener("click",function (e) {if (e.target.innerText === "暂停") {clearInterval(timerId)timerId = nullbtnClear.innerText = "继续"} else if (e.target.innerText === "继续") {startAutoPlay()btnClear.innerText = "暂停"}})</script>
</body></html>

定时器setTimeout和setInterval的简单应用相关推荐

JS定时器setTimeout和setInterval介绍
JS定时器setTimeout和setInterval介绍 JavaScript 定时器,有时也称为"计时器",用来在经过指定的时间后执行某些任务.avaScript 中提供了两种 ...
js中的定时器 setTimeout()和setInterval() (保姆级教程)
1 两种定时器 window 对象给我们提供了 2 个非常好用的方法-定时器. setTimeout() setInterval() 2 setTimeout() 定时器 window.setTime ...
关于定时器setTimeout与setInterval的定时与关闭操作
setTimeout与setInterval setTimeout只执行一次,主要广泛用于在指定的毫秒(1000ms=1s)后调用函数等.而setInterval则是在相隔指定的周期内循环执行.所以s ...
js定时器setTimeout和setInterval用法及区别，清除定时器的使用
setTimeout和setInterval使用方法定时器两个参数,第一个是执行代码,第二个是执行时间.执行时间自己随便设置,执行代码有以下几种方式传入: 1.匿名函数形式传入 setTimeout ...
js中的两种定时器setTimeout()和setInterval()怎么用
JS有两种定时器分别是setTimeout()和setInterval(),这两个区别就是setTimeout()是一次性的定时器,而setInterval()是循环的定时器. 定时器的精度 js中的 ...
定时器 setTimeout、setInterval详解
定时器:按我个人理解来说就是固定某个时间后,时间到了,就提醒我时间到了. 程序中的定时器:相当于倒计时,也相当于计时器.作用是在设定的某个时间后,执行特定的方法. 我们先来了解一下setTimeout ...
定时器 setTimeout与setInterval的用法
一.setTimeout()方法(setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式.): <script>function f1(){console.log('蒙多觉 ...
如何使用定时器settimeout、setInterval执行能传递参数的函数(转)
来自: http://www.cnblogs.com/wkylin/archive/2012/09/07/2674911.html var userName="jack"; //根 ...
微信小程序setinterval_简单谈谈setTimeout与setInterval
感谢踩过的坑 sf社区的第一篇文章. 最近在做一个拍卖的微信小程序,用到了定时器setTimout和setInterval,简单谈谈这两个api. setTimeout 最常见的用法就是第二种(第三种 ...

定时器setTimeout和setInterval的简单应用

定时器setTimeout和setInterval的简单应用相关推荐

最新文章

热门文章