目錄
一.前言
二.計時器
1.計時器的分類
2.?創建計時器的方式
創建間隔計時器
創建方式三種
1.匿名函數
2.使用函數直接作為計時器的執行函數
?2.使用函數直接作為計時器的執行函數,用字符串的形式寫入
?3.計時器的返回值
4.清除計時器
?5.延遲計時器
?相關代碼
一.前言
? ? ? ? 在 JavaScript 中，計時器（Timer）是一種用于執行定時任務的機制。它允許你在指定的時間間隔執行代碼或者在一定延遲后執行代碼。JavaScript 提供了兩種主要的計時器函數：setTimeout 和 setInterval。
二.計時器
1.計時器的分類
計時器分為兩種
? ? ?間隔計時器：設置每隔多久執行一次操作或者函數
? ? ?延遲計時器：設置延遲多久才執行操作或者函數
2.?創建計時器的方式
創建間隔計時器
使用方法是 setInterval()
參數有兩個
參數1：執行的函數
參數2：時間間隔，單位是ms，1s = 1000ms
let num = 10
// 賽t in t 沃
let n = null
let timern = setInterval(function(){num--time.innerHTML = num//清除計時器if (num <=0) {clearInterval(n)}
},1000)
console.log(n,num);?
創建方式三種
1.匿名函數
? ? ?setInterval(function(){
? ? ? ? ? //code
? ? ?},1000)
2.使用函數直接作為計時器的執行函數
? ? ?function show(){}
? ? ?setInterval(show,1000);
?2.使用函數直接作為計時器的執行函數,用字符串的形式寫入
? ? ?function show(){}
? ? ?setInterval('show()',1000);
?3.計時器的返回值
? ? ? ?計時器的返回值，返回值是當前瀏覽器分配給計時器的編號，谷歌從1開始火狐從2開始，edge是從1開始
4.清除計時器
?清除計時器：
? ? ? ? 清除間隔計時器
? ? ? ? clearInterval（計時器對應的編號）
let num = 10
// 賽t in t 沃
let n = null
let timern = setInterval(function(){num--time.innerHTML = num//清除計時器if (num <=0) {clearInterval(n)}
},1000)
console.log(n,num);?5.延遲計時器
延遲計時器
? ? ? setTimeout(function(){
? ? ? ? ? //code
? ? ? ?},1000)
? ? ?含義是1s之后再執行函數中的代碼（執行一次就完了，一般不清除
? ? ?清除延遲計時器，一般不清除
? ? ?clearTimeout（計時器對應的編號）
//延時計時器
btn.onclick = function(){setTimeout(function(){alert('計時器不好玩')},1000)
}?相關代碼
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>計時器</title><style>*{margin: 0;padding: 0;}#time{width: 200px;height: 30px;text-align: center;line-height: 30px;border: 1px #f00 solid;font-size: 20px;}</style>
</head>
<body><p id="time">10</p><button id="start">點擊開始</button><button id="stop1">點擊停止倒計時</button><button id="btn">點擊一秒后彈出</button>
</body>
</html>
<script>
/*
計時器
1.屬于BOM中的內容
2.計時器分為兩種間隔計時器：設置每隔多久執行一次操作或者函數延遲計時器：設置延遲多久才執行操作或者函數
3.創建計時器的方式創建間隔計時器使用方法是 setInterval()參數有兩個參數1：執行的函數參數2：時間間隔，單位是ms，1s = 1000ms創建方式三種1.匿名函數setInterval(function(){//code},1000)2.使用函數直接作為計時器的執行函數function show(){}setInterval(show,1000);2.使用函數直接作為計時器的執行函數,用字符串的形式寫入function show(){}setInterval('show()',1000);計時器的返回值，返回值是當前瀏覽器分配給計時器的編號，谷歌從1開始火狐從2開始，edge是從1開始計時器函數里面的變量，屬于局部變量，因此外面的操作不能直接操作計時器內部的變量，可以理解為外部的操作不會對計時器內部照成影響清除計時器： 清除間隔計時器clearInterval（計時器對應的編號）延遲計時器setInterval(function(){//code},1000)含義是1s之后再執行函數中的代碼（執行一次就完了，一般不清除清除延遲計時器，一般不清除clearTimeout（計時器對應的編號）
*/
let num = 10
// 賽t in t 沃
let n = null
let timern = setInterval(function(){num--time.innerHTML = num//清除計時器if (num <=0) {clearInterval(n)}
},1000)
console.log(n,num);//點擊停止倒計時
stop1.onclick = function(){clearInterval(n)
}function show(){let r = Math.floor(Math.random()*256)let g= Math.floor(Math.random()*256)let b = Math.floor(Math.random()*256)time.style.background = `rgb(${r},${g},${b})`
}
start.onclick = function(){//在使用前先清除，防止計時器累計clearInterval(timer)timer = setInterval(show,1000)
}//延時計時器
btn.onclick = function(){setTimeout(function(){alert('計時器不好玩')},1000)
}
</script>
