JavaScript定時器使用方法詳解
阿新 • • 發佈：2020-03-30
本文例項為大家分享了JavaScript定時器使用的具體程式碼，供大家參考，具體內容如下
定時器分類
1、迴圈執行：一段程式能夠每間隔一段時間執行一次【setInterval()】【clearInterval()】
2、定時執行（一次定時器）：某一段程式需要在延遲多少時間後執行【setTimeout()】【clearTimeout()】
定時器使用
使用注意：為了防止定時器累加，使用定時器要先清除後設置；要保證記憶體中只有一個定時器。
1、迴圈執行：一段程式能夠每間隔一段時間執行一次
設定定時器：【var timeid = window.setInterval（“方法名或方法”，“延時”）;】
// window.setInterval("console.log('1秒列印一次')",1000);
// setInterval(function() {
// console.log('1秒列印一次');
// },1000);
function test() {
console.log('1秒列印一次');
}
setInterval(test,2000);
示例1：秒錶計時
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定時器計時</title>
<style>
#box {
width: 300px;
height: 200px;
border: 1px solid #ccc;
margin: 20px auto;
text-align: center;
}
.btn {
width: 100%;
margin: 10px;
}
.diaplayTime {
font-weight: 600;
font-size: 20px;
margin-top: 30px;
}
</style>
</head>
<body>
<div id="box">
<div class="btn">
<button id="btn1">開啟</button>
<button id="btn2">結束</button>
<button id="btn3">清零</button>
</div>
<div class="diaplayTime">
<span>計時時間為：</span>
<span id="totalTime">0</span> 秒
</div>
</div>
<script>
window.onload = function() {
// 1.獲取需要的標籤
var btn1 = $("btn1");
var btn2 = $("btn2");
var btn3 = $("btn3")
var totalTime = $("totalTime");
var second = 0,timer = null;
// 2. 開啟定時器
btn1.onclick = function() {
// 定時器先清除後設置：防止定時器累加
clearInterval(timer);
// 2.1 設定定時器
timer = setInterval(function() {
second += 1;
console.log(second)
totalTime.innerHTML = second;
},1000);
}
// 3. 結束定時器
btn2.onclick = function() {
clearInterval(timer);
}
// 4.時間清零
btn3.onclick = function() {
clearInterval(timer);
second = 0;
totalTime.innerHTML = second;
}
}
function $(id) {
return typeof id === "string" ? document.getElementById(id) : null;
}
</script>
</body>
</html>示例2：節假日倒計時
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定時器-放假倒計時</title>
<style>
#time {
font-size: 30px;
color: blue;
text-align: center;
}
</style>
</head>
<body>
<div id="time"></div>
<script>
window.onload = function() {
// 1.獲取需要的標籤
var time = document.getElementById('time');
// 2. 自定義將來的時間
var nextDate = new Date('2019/10/18 17:30:00');
// 3. 開啟定時器
setInterval(function() {
// 4. 獲取現在的時間
var currentDate = new Date();
// 5. 獲取時間戳
var currentTime = currentDate.getTime();
var nextTime = nextDate.getTime();
// 6. 剩下的時間戳
var allTime = nextTime - currentTime;
// 7. 把毫秒轉成秒
var allSecond = parseInt(allTime / 1000);
// 8.轉化
var d = size(parseInt(allSecond / 3600 / 24));
var h = size(parseInt(allSecond / 3600 % 24));
var m = size(parseInt(allSecond / 60 % 60));
var s = size(parseInt(allSecond % 60));
// 9. 注入
time.innerText = "距離放假還有" + d + "天" + h + "小時" + m + "分鐘" + s + "秒";
},1000);
// 時間顯示處理
function size(num) {
return num >= 10 ? num : '0' + num;
}
}
</script>
</body>
</html>注意：把總的秒數（allSecond）轉化為 天(d)+時(h)+分(m)+秒(s)的形式，公式如下
d=parseInt(allSecond / 3600 / 24)
h=parseInt(allSecond / 3600 %24)
m=parseInt(allSecond / 60 %60)
s=parseInt(allSecond%60)
示例3：時鐘
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
#box {
width: 600px;
height: 600px;
background: url("images/clock.jpg") no-repeat;
margin: 10px auto;
position: relative;
}
#hour,#min,#second {
position: absolute;
left: 50%;
top: 0;
width: 30px;
height: 600px;
margin-left: -15px;
}
#hour {
background: url("images/hour.png") no-repeat center center;
}
#min {
background: url("images/minute.png") no-repeat center center;
}
#second {
background: url("images/second.png") no-repeat center center;
}
</style>
</head>
<body>
<div id="box">
<div id="hour"></div>
<div id="min"></div>
<div id="second"></div>
</div>
<script>
window.onload = function() {
// 1. 獲取需要的標籤
var hour = document.getElementById("hour");
var min = document.getElementById("min");
var second = document.getElementById("second");
// 2.開啟定時器
setInterval(function() {
// 2.1 獲取當前的時間戳
var date = new Date();
// 2.2 求出總毫秒數
var millS = date.getMilliseconds();
var s = date.getSeconds() + millS / 1000;
var m = date.getMinutes() + s / 60;
var h = date.getHours() % 12 + m / 60;
// 2.3 旋轉
hour.style.transform = 'rotate(' + h * 30 + 'deg)';
min.style.transform = 'rotate(' + m * 6 + 'deg)';
second.style.transform = 'rotate(' + s * 6 + 'deg)';
},10);
}
</script>
</body>
</html>
注意：1小時時針旋轉30度，1分鐘分鐘旋轉6度，1秒鐘秒鐘旋轉6度。
hour.style.transform = 'rotate(' + h * 30 + 'deg)';
min.style.transform = 'rotate(' + m * 6 + 'deg)';
second.style.transform = 'rotate(' + s * 6 + 'deg)';
2、定時執行：某一段程式需要在延遲多少時間後執行
設定定時器：【var timeid = window.setTimeout(“方法名或方法”,“延時”);】
清除定時器：【window.clearTimeout(timeid);】
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定時器</title>
</head>
<body>
<button id="btn1">5秒後執行彈出對話方塊</button>
<button id="btn2">停止</button>
<script>
window.onload = function() {
// 1. 獲取需要的標籤
var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
var timer = null;
// 2. 監聽按鈕的點選
btn1.onclick = function() {
clearTimeout(timer);
// 一次定時器
timer = setTimeout(function() {
alert('5秒後執行彈出對話方塊');
},5000);
};
btn2.onclick = function() {
clearTimeout(timer);
}
}
</script>
</body>
</html>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。