下面将会讲解JavaScript里面的定时器，定时器是js原生提供的一种延迟执行代码的方式，现在在这里将其配合一些案例详细讲解一下。案例里面的代码注释有详细解释，可以帮助大家学习。

定时器的分类

延迟定时器（setTimeout）

语法：

三种setTimeout书写方式

案例：点击按钮间隔3秒出现弹窗

案例：打开页面后间隔5秒显示图片

间隔定时器（setInterval）

语法：

书写方式举例

案例：图片切换

案例：10s的倒计时

定时器的区别：

清除定时器

案例：验证码倒计时

定时器的分类

- 延迟定时器（setTimeout）--将代码延迟多长时间执行

- 间隔定时器（setInterval）--将代码每隔多长时间执行一次

延迟定时器（setTimeout）

语法：

setTimeout(函数，时间)

函数：需要延迟执行的代码

时间：隔多长时间执行单位：毫秒 1000毫秒=1秒

三种setTimeout书写方式

//延时3s在控制台打印：我被执行了
//第一种方式，把函数写在setTimeout里面setTimeout(function(){
console.log('我被执行了');
},3000)//第二种方式，在setTimeout写函数名字setTimeout(fun,3000)
function fun(){
alert('我是延迟定时器')    }//第三种方式，在setTimeout里面“调用”函数，别忘了加单引号否则setTimeout不起效果setTimeout('fun()',3000)
function fun(){alert('我是延迟定时器')
}

案例：点击按钮延时3秒出现弹窗

//点击按钮，3s后弹窗显示信息：我是延迟定时器
//记得别忘了在h5里面写上按钮
document.querySelector('button').onclick=function(){//按钮的点击事件
setTimeout(fun,3000)//延时3s
}function fun(){alert('我是延迟定时器')
}

效果：点击按钮3s后

案例：打开页面后间隔5秒显示图片

<img src="../img/a1.jpg" alt="" srcset="">
/*图片在此，样式设置为display='none'使其不可见*/
/*多余样式设置不做赘述*/

var img=document.querySelector('img')setTimeout(function(){img.style.display='block'//在此设置display='block'使图片可见},5000)//延时五秒

案例：点击按钮后间隔3s出现图片，如果存在图片，则3s后图片消失

html5：

<button id="but1">点击</button>
<div id="div1" style="display: block"></div>

css样式：

 #div1 {height: 300px;width: 300px;background-size: cover;background-image: url(./1024img/狗头.jpg);}

JavaScript：

      var but1 = document.getElementById("but1");var div1 = document.getElementById("div1");but1.onclick = function () {//按钮点击事件if (div1.style.cssText == "display: none;") {//判断图片是否存在，不存在则执行a1setTimeout(a1, 2000);//设置函数a1的延时2sfunction a1() {div1.style.cssText = "display: block;";//改变display使得图片可见}} else {//否则执行a2setTimeout(a2, 2000);//设置函数a2延时2sfunction a2() {div1.style.cssText = " display: none;";//改变display使得图片不可见}}};

效果：

显示：

消失：

间隔定时器（setInterval）

语法：

setInterval（函数，时间）

书写方式举例

与延迟定时器类似，故不赘述

setInterval(function(){console.log('我是间隔定时器');
},1000)

案例：图片切换

效果：

未点击

点击后每秒切换

html5:

    <button id="but1">点击切换图片1s一次</button><img id="tupian" src="./1024img/风暴城.jpg" alt="" />

css样式：

img {width: 500px;height: 300px;}

JavaScript：

      var but1 = document.getElementById("but1");//获取按钮var tupian = document.getElementById("tupian");//获取图片标签img
//利用数组来存放图片的路径var arr = ["./1024img/20220325201733_1.jpg","./1024img/20220410195718_1.jpg","./1024img/20220410200346_1.jpg","./1024img/风暴城.jpg",];
//按钮的点击事件but1.onclick = function () {setInterval(tu, 1000);//设置函数tu的延时，为1svar i = 0;function tu() {if (i <= 3) {//如果i<=3,即为数组下标不大于3tupian.src = arr[i];//在数组中提取图片给img的src路径i++;} else {//如果i>3,即为大于了数组下标，则将i重置为0i = 0;}}};

案例：10s的倒计时

效果：

HTML5：

<button id="but">点击进行倒计时</button>
<div id="div">秒</div>

JavaScript：

      var but = document.getElementById("but");//获取按钮var div = document.getElementById("div");//获取divbut.onclick = function () {//按钮点击事件var a = 10;setInterval(aa, 1000);//函数aa间隔1sfunction aa() {//定义函数aaif (a > 0) {//判断条件，在a>0的时候才执行a--;console.log(a);div.innerText = a + "秒";//改变div的内容，把变量a填充到div里面} else if (a <= 0) {//如果a<=0，则将a重置为10a = 10;a--;console.log(a);div.innerText = a + "秒";}}};

定时器的区别：

- setTimeout只执行一次

- setInterval间隔一段时间执行一次

清除定时器

语法：

clearInterval（定时器名字）

clearTimeout（定时器的名字）

举例说明：

页面打开后一直间隔1s打印一个1，点击按钮btn后停止。

var btn = document.getElementById('btn')//获取按钮var timer = setInterval(function () {//名为timer的定时器console.log(1);//输出打印1}, 1000)btn.onclick = function () {//按钮点击事件clearInterval(timer)//停止名为timer的定时器}

案例：验证码倒计时

日常生活中大家经常遇见输入手机号，然后点击发送验证码这个网页功能，现在来模仿做一下，点击发送验证码后，60s倒计时的效果。

在点击发送验证码按钮后，弹窗随机显示几个字母或数字组合成的字符串，在输入框输入后，（不会检验输入的字符串是否一模一样）即可发送验证码，进入60s倒计时。倒计时结束则按钮重置，清除定时器，可以重新发送验证码进行倒计时。

只是模仿效果，并不会往手机里面发真的验证码。

初始：

点击后：

输入后开始倒计时：

HTML5：

 <input type="text" id="inp" /><button id="ma">发送验证码</button>

JavaScript：

      var inp = document.getElementById("inp");//获取输入框input，好像没有用到它var ma = document.getElementById("ma");//获取按钮function suiji(n) {
//定义一个数组，里面有若干的数字，字母var str = ["d","w","f","r","1"，"2","3","4","5","6","7","8","9","o","v","p","q",];var b = " ";//声明变量b，为空for (var i = 0; i < n; i++) {//for循环控制输出几个字符串b += str[random1(0, str.length - 1)];
//字符串从数组中随机取出，random1为作者在下面封装的函数，在下面讲解}prompt("请输入验证码" + b);//弹窗显示上面随机取出的bconsole.log(b);}ma.onclick = function () {//按钮的点击事件var ding = setInterval(dao, 1000);//为函数dao设置定时器间隔1svar shi = 60;//声明变量shi赋值为60suiji(4);//调用函数suiji并且传参为4function dao() {if (shi > 0) {//if判断shi大于0ma.disabled = "true"; //设置按钮无法点击ma.innerHTML = shi;将shi显示在按钮上shi--;//递减} else {//如果shi小于0clearInterval(ding);//则清除定时器ma.innerHTML = "发送验证码";//重置按钮ma.disabled = " "; //按钮可以点击}}};

生成随机数字的函数

function random1(min, max) {//在min，max里面生成随机数if (min >= max) {//如果min>max则两者调换位置，防止输入最大值最小值时输入反了var a;a = max;max = min;min = a;}//利用js里面的数学方法return Math.floor(Math.random() * (max - min + 1) + min);//Math.random()取0-1之间的随机小数，Math.floor()向下取整 如4.1---4}

JavaScript定时器详解，配合案例讲解相关推荐

JavaScript闭包详解及案例
JavaScript闭包详解及案例一. 变量作用域函数内部可以使用全局变量函数外部不可以使用局部变量当函数执行完毕时,本作用域内的局部变量会被销毁二. 闭包闭包:有权访问另一个函数作用域中 ...
EMD算法之Hilbert-Huang Transform原理详解和案例分析
目录 Hilbert-Huang Transform 希尔伯特-黄变换 Section I 人物简介 Section II Hilbert-Huang的应用领域 Section III Hilbert ...
JavaScript对象详解
转载请注明预见才能遇见的博客:https://my.csdn.net/ 原文地址:https://blog.csdn.net/weixin_42787326/article/details/81297 ...
Springboot 整合 Dubbo/ZooKeeper 详解 SOA 案例
摘要: 原创出处:www.bysocket.com 泥瓦匠BYSocket 希望转载,保留摘要,谢谢! "看看星空,会觉得自己很渺小,可能我们在宇宙中从来就是一个偶然.所以,无论什么事情,仔 ...
JavaScript正则表达式详解（一）正则表达式入门
JavaScript正则表达式是很多JavaScript开发人员比较头疼的事情,也很多人不愿意学习,只是必要的时候上网查一下就可以啦~本文中详细的把JavaScript正则表达式的用法进行了列表,希望 ...
JavaScript事件详解-jQuery的事件实现（三）
正文本文所涉及到的jQuery版本是3.1.1,可以在压缩包中找到event模块.该篇算是阅读笔记,jQuery代码太长.... Dean Edward的addEvent.js 相对于zepto的e ...
DL之DilatedConvolutions：Dilated Convolutions(膨胀卷积/扩张卷积)算法的简介(论文介绍)、架构详解、案例应用等配图集合之详细攻略
DL之DilatedConvolutions:Dilated Convolutions(膨胀卷积/扩张卷积)算法的简介(论文介绍).架构详解.案例应用等配图集合之详细攻略目录 Dilated Con ...
DL之ShuffleNetV2：ShuffleNetV2算法的简介(论文介绍)、架构详解、案例应用等配图集合之详细攻略
DL之ShuffleNetV2:ShuffleNetV2算法的简介(论文介绍).架构详解.案例应用等配图集合之详细攻略目录 ShuffleNetV2算法的简介(论文介绍) 1.论文特点 2.基于硬件 ...
DL之ShuffleNet：ShuffleNet算法的简介(论文介绍)、架构详解、案例应用等配图集合之详细攻略
DL之ShuffleNet:ShuffleNet算法的简介(论文介绍).架构详解.案例应用等配图集合之详细攻略相关文章 DL之ShuffleNet:ShuffleNet算法的简介(论文介绍).架构详 ...

JavaScript定时器详解，配合案例讲解

定时器的分类

延迟定时器（setTimeout）

语法：

三种setTimeout书写方式

案例：点击按钮延时3秒出现弹窗

案例：打开页面后间隔5秒显示图片

间隔定时器（setInterval）

语法：

书写方式举例

案例：图片切换

案例：10s的倒计时

定时器的区别：

清除定时器

案例：验证码倒计时

JavaScript定时器详解，配合案例讲解相关推荐

最新文章

热门文章