文章詳情頁

JavaScript定時器使用方法詳解

瀏覽：2日期：2023-06-22 18:47:07

本文實例為大家分享了JavaScript定時器使用的具體代碼，供大家參考，具體內(nèi)容如下

定時器分類

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

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

定時器使用

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

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

設置定時器：【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：秒表計時

JavaScript定時器使用方法詳解

<!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：節(jié)假日倒計時

JavaScript定時器使用方法詳解

<!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. 獲取現(xiàn)在的時間 var currentDate = new Date(); // 5. 獲取時間戳 var currentTime = currentDate.getTime(); var nextTime = nextDate.getTime(); // 6. 剩下的時間戳 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 + '小時' + m + '分鐘' + s + '秒'; }, 1000); // 時間顯示處理 function size(num) { return num >= 10 ? num : ’0’ + num; } } </script></body> </html>

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

d=parseInt(allSecond / 3600 / 24)

h=parseInt(allSecond / 3600 %24)

m=parseInt(allSecond / 60 %60)

s=parseInt(allSecond%60)

示例3：時鐘

JavaScript定時器使用方法詳解

<!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 求出總毫秒數(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小時時針旋轉(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、定時執(zhí)行：某一段程序需要在延遲多少時間后執(zhí)行

設置定時器：【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秒后執(zhí)行彈出對話框</button> <button id='btn2'>停止</button> <script> window.onload = function() { // 1. 獲取需要的標簽 var btn1 = document.getElementById('btn1'); var btn2 = document.getElementById('btn2'); var timer = null; // 2. 監(jiān)聽按鈕的點擊 btn1.onclick = function() { clearTimeout(timer); // 一次定時器 timer = setTimeout(function() { alert(’5秒后執(zhí)行彈出對話框’); }, 5000); }; btn2.onclick = function() { clearTimeout(timer); } } </script></body> </html>

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網(wǎng)。

JavaScript

上一條：javascript實現(xiàn)簡易數(shù)碼時鐘下一條：javascript實現(xiàn)簡單搜索功能

相關文章：

1. python裝飾器三種裝飾模式的簡單分析2. JavaScript Reduce使用詳解3. Python實現(xiàn)迪杰斯特拉算法過程解析4. 詳解Python模塊化編程與裝飾器5. Spring security 自定義過濾器實現(xiàn)Json參數(shù)傳遞并兼容表單參數(shù)(實例代碼)6. JavaScript中的AOP編程的基本實現(xiàn)7. 淺談JavaScript中等號、雙等號、三等號的區(qū)別8. 詳解java中static關鍵詞的作用9. Python如何進行時間處理10. python使用ctypes庫調(diào)用DLL動態(tài)鏈接庫

排行榜

					
					Spring security 自定義過濾器實現(xiàn)Json參數(shù)傳遞并兼容表單參數(shù)(實例代碼)
Python實現(xiàn)迪杰斯特拉算法過程解析
詳解java中static關鍵詞的作用
詳解Python模塊化編程與裝飾器
Django框架安裝及項目創(chuàng)建過程解析
python裝飾器三種裝飾模式的簡單分析
JXTA概念介紹-Matrix翻譯
Django實現(xiàn)任意文件上傳（最簡單的方法）
java結構性模式之變壓器模式介紹(二)
JavaScript Reduce使用詳解
Python如何進行時間處理
				