window提供的两种定时器
- setTimeout（）
- setInterval（）
setTimeout()方法用于设置一个定时器，延迟时间到了就去执行调用函数，只执行一次就结束了。
<script>
//延时时间单位是毫秒
//setTimeout('callback()',2000);是和下面一样的但是不提倡
setTimeout(callback,2000);
function callback () {
alert('两秒过去了');
}
var timer1 = setTimeout(callback, 3000);
var timer2 = setTimeout(callback, 5000);
</script>页面中可能有多个定时器，通常要给定时器加标识符（名字）（如上timer1、timer2）
setTimeout()这个调用函数也称回调函数callback。普通函数是按照代码顺序直接调用，而这个需要等待时间，时间到了才去调用，因此称为回调函数。当上一件事干完，再回头调用这个函数。以前学的element.οnclick=funtion(){}或者element.addEventListener('click',fn);里面的函数也叫回调函数。
案例：五秒钟后自动关闭的广告
<img src="images/ad.jpg" alt="" class="ad">
<script>
var ad = document.querySelector('.ad');
setTimeout(function() {
ad.style.display = 'none';
}, 5000);
</script>停止setTimeout()定时器
clearTimeout()方法取消了先前通过调用setTimeout（）建立的定时器
<button>点击停止定时器</button>
<script>
var btn = document.querySelector('button');
var timer = setTimeout(function() {
console.log('爆炸了');
}, 5000);
btn.addEventListener('click', function() {
clearTimeout(timer); //（定时器的标识符）
})
</script>setInterval（）定时器
其余和setTimeout（）一样，但是这个定时器的功能是每隔一个时间就去调用一次函数。
案例：倒计时
- 倒计时是不断变化的，因此需要定时器来自动变化（setInterval）
- 先前设置了三个盒子分别存放时分秒
- 三个盒子利用innerHTML放入计算的小时分钟秒数
- 第一次执行也是时间间隔毫秒数，因此刷新页面会有空白
- 采取封装函数的方式，先调用一次这个函数，防止刚开始刷新页面空白
window.addEventListener('load',function(){
var hour = document.querySelector('.hour');
var minute = document.querySelector('.minute');
var second = document.querySelector('.second'); // 秒
var inputTime = +new Date('2022-1-18 18:00:00'); // 返回的是用户输入de截止时间 总的毫秒数
countDown();//提前调用一次防止刷新间隔一秒的空白
//开启定时器
setInterval(countDown,1000);
function countDown() {
var nowTime = +new Date(); // 返回的是当前时间总的毫秒数
var times = inputTime>nowTime?(inputTime - nowTime) / 1000 : 0; // times是剩余时间总的秒数
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>
<div>
<span class="hour">1</span>
<span class="minute">2</span>
<span class="second">3</span>
</div>
停止setInterval（）定时器
最好将setInterval（）的标识符定义为全局变量，并赋值。
<button class="begin">开启定时器</button>
<button class="stop">停止定时器</button>
<script>
var begin = document.querySelector('.begin');
var stop = document.querySelector('.stop');
var timer = null; // 全局变量 null是一个空对象
begin.addEventListener('click', function() {
timer = setInterval(function() {
console.log('ni hao ma');
}, 1000);
})
stop.addEventListener('click', function() {
clearInterval(timer);
})
</script>案例:短信发送案例
- 按钮点击之后，会禁用 disabled 为true
- 同时按钮里面的内容会变化， 注意 button 里面的内容通过 innerHTML修改
- 里面秒数是有变化的，因此需要用到定时器
- 定义一个变量，在定时器里面，不断递减
- 如果变量为0 说明到了时间，我们需要停止定时器，并且复原按钮初始状态
手机号码： <input type="number"> <button>发送</button>
<script>
var btn = document.querySelector('button');
var time = 60; // 定义剩下的秒数
btn.addEventListener('click', function() {
btn.disabled = true;
var timer = setInterval(function() {
if (time == 0) {
// 清除定时器和复原按钮
clearInterval(timer);
btn.disabled = false;
btn.innerHTML = '发送';
} else {
btn.innerHTML = '还剩下' + time + '秒';
time--;
}
}, 1000);
})
</script>
