BOM 定時器+回撥函式
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>