溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

如何使用JavaScript定時(shí)器

發(fā)布時(shí)間：2021-05-21 17:50:58 來(lái)源：億速云 閱讀：135 作者：Leah 欄目：web開(kāi)發(fā)

這篇文章將為大家詳細(xì)講解有關(guān)如何使用JavaScript定時(shí)器，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。

定時(shí)器分類

1、循環(huán)執(zhí)行：一段程序能夠每間隔一段時(shí)間執(zhí)行一次【setInterval()】【clearInterval()】

2、定時(shí)執(zhí)行（一次定時(shí)器）：某一段程序需要在延遲多少時(shí)間后執(zhí)行【setTimeout()】【clearTimeout()】

定時(shí)器使用

使用注意：為了防止定時(shí)器累加，使用定時(shí)器要先清除后設(shè)置；要保證內(nèi)存中只有一個(gè)定時(shí)器。

1、循環(huán)執(zhí)行：一段程序能夠每間隔一段時(shí)間執(zhí)行一次

設(shè)置定時(shí)器：【var timeid = window.setInterval（“方法名或方法”，“延時(shí)”）;】
清除定時(shí)器【window.clearInterval(timeid);】

 // window.setInterval("console.log('1秒打印一次')", 1000); 
 
 // setInterval(function() {
 // console.log('1秒打印一次');
 // }, 1000);
 
 
 function test() {
 console.log('1秒打印一次');
 }
 
 setInterval(test, 2000);

示例1：秒表計(jì)時(shí)

如何使用JavaScript定時(shí)器

<!DOCTYPE html>
<html lang="en">
 
<head>
 <meta charset="UTF-8">
 <title>定時(shí)器計(jì)時(shí)</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">開(kāi)啟</button>
 <button id="btn2">結(jié)束</button>
 <button id="btn3">清零</button>
 </div>
 <div class="diaplayTime">
 <span>計(jì)時(shí)時(shí)間為：</span>
 <span id="totalTime">0</span>&nbsp;&nbsp;秒
 </div>
 </div>
 <script>
 window.onload = function() {
 // 1.獲取需要的標(biāo)簽
 var btn1 = $("btn1");
 var btn2 = $("btn2");
 var btn3 = $("btn3")
 var totalTime = $("totalTime");
 
 
 var second = 0,
 timer = null;
 
 // 2. 開(kāi)啟定時(shí)器
 btn1.onclick = function() {
 // 定時(shí)器先清除后設(shè)置：防止定時(shí)器累加
 clearInterval(timer);
 // 2.1 設(shè)置定時(shí)器
 timer = setInterval(function() {
 second += 1;
 console.log(second)
 totalTime.innerHTML = second;
 
 }, 1000);
 }
 
 // 3. 結(jié)束定時(shí)器
 btn2.onclick = function() {
 clearInterval(timer);
 }
 
 // 4.時(shí)間清零
 btn3.onclick = function() {
 clearInterval(timer);
 second = 0;
 totalTime.innerHTML = second;
 }
 }
 
 function $(id) {
 return typeof id === "string" ? document.getElementById(id) : null;
 }
 </script>
</body>
 
</html>

示例2：節(jié)假日倒計(jì)時(shí)

如何使用JavaScript定時(shí)器

<!DOCTYPE html>
<html lang="en">
 
<head>
 <meta charset="UTF-8">
 <title>定時(shí)器-放假倒計(jì)時(shí)</title>
 <style>
 #time {
 font-size: 30px;
 color: blue;
 text-align: center;
 }
 </style>
</head>
 
<body>
 <div id="time"></div>
 <script>
 window.onload = function() {
 // 1.獲取需要的標(biāo)簽
 var time = document.getElementById('time');
 
 // 2. 自定義將來(lái)的時(shí)間
 var nextDate = new Date('2019/10/18 17:30:00');
 
 // 3. 開(kāi)啟定時(shí)器
 setInterval(function() {
 // 4. 獲取現(xiàn)在的時(shí)間
 var currentDate = new Date();
 
 // 5. 獲取時(shí)間戳
 var currentTime = currentDate.getTime();
 var nextTime = nextDate.getTime();
 
 // 6. 剩下的時(shí)間戳
 var allTime = nextTime - currentTime;
 
 // 7. 把毫秒轉(zhuǎn)成秒
 var allSecond = parseInt(allTime / 1000);
 
 // 8.轉(zhuǎn)化
 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 + "小時(shí)" + m + "分鐘" + s + "秒";
 }, 1000);
 
 
 // 時(shí)間顯示處理
 function size(num) {
 return num >= 10 ? num : '0' + num;
 }
 }
 </script>
</body>
 
</html>

注意：把總的秒數(shù)（allSecond）轉(zhuǎn)化為 天(d)+時(shí)(h)+分(m)+秒(s)的形式，公式如下

d=parseInt(allSecond / 3600 / 24)

h=parseInt(allSecond / 3600 %24)

m=parseInt(allSecond / 60 %60)

s=parseInt(allSecond%60)

示例3：時(shí)鐘

如何使用JavaScript定時(shí)器

<!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. 獲取需要的標(biāo)簽
 var hour = document.getElementById("hour");
 var min = document.getElementById("min");
 var second = document.getElementById("second");
 
 // 2.開(kāi)啟定時(shí)器
 setInterval(function() {
 // 2.1 獲取當(dāng)前的時(shí)間戳
 var date = new Date();
 
 // 2.2 求出總毫秒數(shù)
 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 旋轉(zhuǎn)
 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小時(shí)時(shí)針旋轉(zhuǎn)30度，1分鐘分鐘旋轉(zhuǎn)6度，1秒鐘秒鐘旋轉(zhuǎn)6度。

hour.style.transform = 'rotate(' + h * 30 + 'deg)';
min.style.transform = 'rotate(' + m * 6 + 'deg)';
second.style.transform = 'rotate(' + s * 6 + 'deg)';

2、定時(shí)執(zhí)行：某一段程序需要在延遲多少時(shí)間后執(zhí)行

設(shè)置定時(shí)器：【var timeid = window.setTimeout(“方法名或方法”, “延時(shí)”);】
清除定時(shí)器：【window.clearTimeout(timeid);】

示例

<!DOCTYPE html>
<html lang="en">
 
<head>
 <meta charset="UTF-8">
 <title>定時(shí)器</title>
</head>
 
<body>
 <button id="btn1">5秒后執(zhí)行彈出對(duì)話框</button>
 <button id="btn2">停止</button>
 <script>
 window.onload = function() {
 // 1. 獲取需要的標(biāo)簽
 var btn1 = document.getElementById("btn1");
 var btn2 = document.getElementById("btn2");
 var timer = null;
 
 // 2. 監(jiān)聽(tīng)按鈕的點(diǎn)擊
 btn1.onclick = function() {
 clearTimeout(timer);
 // 一次定時(shí)器
 timer = setTimeout(function() {
 alert('5秒后執(zhí)行彈出對(duì)話框');
 }, 5000);
 };
 
 btn2.onclick = function() {
 clearTimeout(timer);
 }
 }
 </script>
</body>
 
</html>

JavaScript可以做什么

1.可以使網(wǎng)頁(yè)具有交互性，例如響應(yīng)用戶點(diǎn)擊，給用戶提供更好的體驗(yàn)。 2.可以處理表單，檢驗(yàn)用戶的輸入，并提供及時(shí)反饋節(jié)省用戶時(shí)間。 3.可以根據(jù)用戶的操作，動(dòng)態(tài)的創(chuàng)建頁(yè)面。 4使用JavaScript可以通過(guò)設(shè)置cookie存儲(chǔ)在瀏覽器上的一些臨時(shí)信息。

關(guān)于如何使用JavaScript定時(shí)器就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手