【JavaScript定時器小案例】常見的幾種定時器實現的案例
- 2021 年 11 月 15 日
- 筆記
- javascript
【JavaScript定時器小案例】常見的幾種定時器實現的案例
部落格說明
文章所涉及的資料來自互聯網整理和個人總結，意在於個人學習和經驗匯總，如有什麼地方侵權，請聯繫本人刪除，謝謝！
說明
在日常開發中定時器的使用還是挺多的，這裡介紹幾種比較常見的。
案例一：手機驗證碼倒計時
程式碼
<!DOCTYPE html>
<html>
<body>
<input type="button" value="獲取驗證碼" onclick="settime(this)" />
<script>
// 發送驗證碼
var countdown = 60;
function settime(obj) {
if (countdown === 0) {
obj.removeAttribute("disabled");
obj.value="獲取驗證碼";
countdown = 60;
return;
} else {
obj.setAttribute("disabled", true);
obj.value = "重新發送(" + countdown + ")";
countdown--;
}
setTimeout(function() {
settime(obj)
},1000)
}
</script>
</body>
</html>
效果
程式碼解析
使用setTimeout來模擬倒計時的效果，這其中有小許誤差，不過可以在可接受的範圍內。
案例二：日曆時鐘
程式碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>簡易時鐘</title>
<style>
.time{
width: 300px;
height: 60px;
margin:0px auto;
line-height: 60px;
text-align: center;
color: red;
background-color: yellow;
}
</style>
</head>
<body>
<div id="time" class="time"></div>
</body>
<script>
setInterval(function(){
var d = new Date();
var time = document.getElementById('time');
//獲取當前區域時間並轉成字元串
time.innerHTML = d.toLocaleString();
},1000);
</script>
</html>
效果
程式碼解析
利用setInterval每間隔1秒獲取一次當前時間
案例三：抽獎
程式碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>抽獎</title>
</head>
<body>
<input type="button" value="開始" onclick="start()" />
<input type="button" value="結束" onclick="end()" />
</body>
<div id="num_text">
</div>
<script>
var i = 1;
var t = Object;
function setNum() {
var res = document.getElementById('num_text')
res.innerHTML = i;
res.style.fontSize = '200px'
i++;
// 超過100重置
if(i === 100){
i = 1;
}
}
function start() {
t = setInterval(setNum, 10)
}
function end() {
t = clearInterval(t)
}
</script>
</html>
效果
程式碼解析
先讓一個數開始快速循環，通過使用setInterval完成，當點擊結束時，調用clearInterval清除定時器，達到定格的效果，具體循環內可以換成獎品數組或者其他的數據，也能夠達到此類效果。
總結
選了三個比較有代表性的案例，pym也可以通過以上三個簡單的案例擴充起來，達到鍛煉JS的定時器的效果。比如日曆時鐘的那個，可以做成一個錶盤，讓時分秒進行轉動。
如果點贊有50，就安排上！
感謝
萬能的網路
公眾號-歸子莫，小程式-小歸部落格
