溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關如何使用JavaScript定時器，文章內容質量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關知識有一定的了解。
定時器分類
1、循環執行：一段程序能夠每間隔一段時間執行一次【setInterval()】【clearInterval()】
2、定時執行（一次定時器）：某一段程序需要在延遲多少時間后執行【setTimeout()】【clearTimeout()】
定時器使用
使用注意：為了防止定時器累加，使用定時器要先清除后設置；要保證內存中只有一個定時器。
1、循環執行：一段程序能夠每間隔一段時間執行一次
設置定時器：【var timeid = window.setInterval（“方法名或方法”，“延時”）;】
清除定時器【window.clearInterval(timeid);】
// 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>1.可以使網頁具有交互性，例如響應用戶點擊，給用戶提供更好的體驗。 2.可以處理表單，檢驗用戶的輸入，并提供及時反饋節省用戶時間。 3.可以根據用戶的操作，動態的創建頁面。 4使用JavaScript可以通過設置cookie存儲在瀏覽器上的一些臨時信息。
關于如何使用JavaScript定時器就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
