window对象提供了两种定时器：setTimeout()和setInterval()
1.setTimeout()定时器 window.setTimeout(调用函数,[延迟的毫秒数]);
用于设置一个定时器，该定时器在定时器到期后执行调用函数
注意点: ①window可省略
②延迟时间单位是毫秒，但可以省略，如果省略默认是0
③这个调用函数可以直接写函数 还可以写函数名 还有一个写法'函数名()'
④页面中可能有很多的定时器，我们经常给定时器加标识符（名字）
三种写法：① setTimeout(function() {
//函数体
},2000);
② function callback() { ③ function callback() {
//函数体 //函数体
} }
setTimeout(callback,2000); setTimeout('callback',2000);(不推荐！！！)
回调函数callback：普通函数是按照代码顺序直接调用，而这个函数，需要等待时间，时间到了才去调用这个函数，因此称为回调函数。
简单理解：回调，就是回头调用的意思，上一件事干完，再回头再调用这个函数
setTimeout()、element.onclick = function() {}或者element.addEventListener('click', fn);里面的函数都是回调函数。
停止setTimeout()定时器
window.clearTimeout(timeout ID) (window可省略)
clearTimeout()方法取消了先前通过调用setTimeout()建立的定时器。
2.setInterval()定时器 window.setInterval(回调函数,[间隔的毫秒数]);
setInterval()方法重复调用一个函数，每隔这个时间，就去调用一次回调函数。
注意(与setTimeout类似):1.window可省略
2.这个调用函数可以直接写函数，或者写函数名或者采取字符串'函数名()'三种形式。
3.间隔的毫秒数省略默认是0，如果写，必须是毫秒，表示每隔多少毫秒就自动调用这个函数。
4.因为定时器很多，所以经常给定时器赋值一个标识符。
setTimeout延时时间到了就去调用这个回调函数，只调用一次就结束了这个定时器
setInterval每隔这个延时时间，就去调用这个回调函数，会调用很多次，重复调用这个函数
清除定时器clearInterval()
window.clearInterval(intervalID);
clearInterval()方法取消了先前通过调用setInterval()建立的定时器。
注意：1.window可以省略
2.里面的参数就是定时器的标识符。
定时器案例：
<!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>Document</title><style type="text/css">.ad {display: block;}</style>
</head>
<body><img src="love.gif" class="ad">
</body>
<script>var ad = document.querySelector('.ad');setTimeout(function () {ad.style.display = 'none';}, 2000);//效果：（2000毫秒）两秒后图片消失
</script>
</html><!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>Document</title>
</head>
<body><button>停止定时</button>
</body>
<script>var btn = document.querySelector('button');var timer = setTimeout(function() {alert('哈');},3000);btn.addEventListener('click',function() {clearTimeout(timer);})
</script>
</html><!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>setInterval</title>
</head>
<body><button>停止定时</button>
</body>
<script>var btn = document.querySelector('button');var timer = setInterval(function() {alert('哈');},3000);btn.addEventListener('click',function() {clearInterval(timer);})
</script>
</html><!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>倒计时效果</title><style>span {display: block;width: 20px;height: 20px;background-color: black;color: #fff;margin-right: 2px;float: left;text-align: center;font-size: 13.5px;}</style>
</head><body><span class="day">00</span><span class="hour">00</span><span class="minute">00</span><span class="second">00</span>
</body>
<script>//倒计时效果//案例分析：1.这个倒计时是不断变化的，因此需要定时器来自动变化(setInterval)//2.三个黑色盒子里面分别存放时分秒//3.三个黑色盒子利用innerHTML放入计算的小时分钟秒数//4.第一次执行也是间隔毫秒数，因此刷新页面会有空白//5.最好采取封装函数的方式，这样可以先调用一次这个函数，防止刚开始刷新页面有空白问题//1.获取元素var day = document.querySelector('.day');//天的黑盒var hour = document.querySelector('.hour');//小时的黑色盒子var minute = document.querySelector('.minute');//分钟的黑色盒子var second = document.querySelector('.second');//秒数的黑色盒子var inputTime = +new Date('2021-11-15 00:00:00');//返回的是用户输入时间总的毫秒数countDown();//先调用一次这个函数，防止第一次刷新页面有空白//2.开启定时器setInterval(countDown, 1000);function countDown() {var nowTime = +new Date();//返回的是当前时间总的毫秒数var times = (inputTime - nowTime) / 1000;//time是剩余时间总的秒数var d = parseInt(times / 60 / 60 / 24);d = d < 10 ? '0' + d : d;day.innerHTML = d;var h = parseInt(times / 60 / 60 % 24);//计算小时h = h < 10 ? '0' + h : h;hour.innerHTML = h;//把剩余的小时给小时黑色盒子var m = parseInt(times / 60 % 60);//计算分数m = m < 10 ? '0' + m : m;minute.innerHTML = m;//把剩余的分钟给分钟黑色盒子var s = parseInt(times % 60);s = s < 10 ? '0' + s : s;second.innerHTML = s;//把剩余的秒数给秒数黑色盒子}</script></html>倒计时效果！！！👆
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title><style type="text/css"></style>
</head>
<body>手机号码:<input type="number"><button>发送</button><script>//案例分析：1.按钮点击之后，会禁用disabled为true//2.同时按钮里面的内容会变化，注意button里面的内容通过innerHTML修改//3.里面秒数是有变化的，因此需要用到定时器//4.定义一个变量，在定时器里面，不断递减//5.如果变量为0说明到了时间，我们需要停止定时器，并且复原按钮初始状态var btn = document.querySelector('button');var time = 3;//定义剩下的秒数btn.addEventListener('click', function () {btn.disabled = true;var timer = setInterval(function () {if (time == 0) {//清除定时器和复原按钮clearInterval(timer);btn.disabled = false;btn.innerHTML = '发送';time = 3;//这个3需要从新开始} else {btn.innerHTML = '还剩下' + time + '秒';time--;}}, 1000);})</script>
</body>
</html>发送短信案例👆
