JavaScript定時器使用方法詳解
本文實例為大家分享了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. 怎樣才能用js生成xmldom對象，并且在firefox中也實現xml數據島？2. Docker容器如何更新打包并上傳到阿里云3. Jsp中request的3個基礎實踐4. Python-jenkins模塊之folder相關操作介紹5. python opencv角點檢測連線功能的實現代碼6. Python讀取圖像并顯示灰度圖的實現7. 在 .NET MAUI 中加載 json 文件的方法8. Java中args參數數組的用法說明9. React 實現具備吸頂和吸底功能組件實例10. python GUI庫圖形界面開發之PyQt5 Qt Designer工具(Qt設計師)詳細使用方法及Designer ui文件轉py文件方法
網公網安備