下面将会讲解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/032533_1.jpg","./1024img/0410195718_1.jpg","./1024img/041046_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}
