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>倒计时效果</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>