JavaScript定時(shí)器使用方法詳解
本文實(shí)例為大家分享了JavaScript定時(shí)器使用的具體代碼,供大家參考,具體內(nèi)容如下
定時(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í)
<!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">開啟</button> <button id="btn2">結(jié)束</button> <button id="btn3">清零</button> </div> <div class="diaplayTime"> <span>計(jì)時(shí)時(shí)間為:</span> <span id="totalTime">0</span> 秒 </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. 開啟定時(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í)
<!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. 自定義將來的時(shí)間 var nextDate = new Date('2019/10/18 17:30:00'); // 3. 開啟定時(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í)鐘
<!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.開啟定時(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í)行彈出對話框</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)聽按鈕的點(diǎn)擊 btn1.onclick = function() { clearTimeout(timer); // 一次定時(shí)器 timer = setTimeout(function() { alert('5秒后執(zhí)行彈出對話框'); }, 5000); }; btn2.onclick = function() { clearTimeout(timer); } } </script> </body> </html>
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
js+html5通過canvas指定開始和結(jié)束點(diǎn)繪制線條的方法
這篇文章主要介紹了js+html5通過canvas指定開始和結(jié)束點(diǎn)繪制線條的方法,涉及html5屬性的操作技巧,需要的朋友可以參考下2015-06-06javascript中動(dòng)態(tài)加載js文件多種解決辦法總結(jié)
這篇文章主要介紹了javascript中動(dòng)態(tài)加載js文件多種解決辦法,有需要的朋友可以參考一下2013-11-11JS實(shí)現(xiàn)根據(jù)文件字節(jié)數(shù)返回文件大小的方法
這篇文章主要介紹了JS實(shí)現(xiàn)根據(jù)文件字節(jié)數(shù)返回文件大小的方法,涉及javascript數(shù)值計(jì)算與字符串操作相關(guān)技巧,需要的朋友可以參考下2016-08-08JavaScript自定義日期格式化函數(shù)詳細(xì)解析
下面的一個(gè)例子就是以獨(dú)立函數(shù)寫出的JavaScript日期格式化函數(shù),獨(dú)立的format函數(shù)?;氐礁袷交倪@一知識(shí)點(diǎn)上,我們考查的是怎么實(shí)現(xiàn)的、運(yùn)用了哪些原理2014-01-01Bootstrap?按鈕下拉菜單的實(shí)現(xiàn)示例
本文主要介紹了Bootstrap?按鈕下拉菜單的實(shí)現(xiàn)示例,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07JS正則截取兩個(gè)字符串之間及字符串前后內(nèi)容的方法
這篇文章主要介紹了JS正則截取兩個(gè)字符串之間及字符串前后內(nèi)容的方法,結(jié)合實(shí)例形式簡單分析了JS正則截取字符串操作的常用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2017-01-01基于JavaScript實(shí)現(xiàn)智能右鍵菜單
這篇文章主要介紹了基于JavaScript實(shí)現(xiàn)智能右鍵菜單的相關(guān)資料,需要的朋友可以參考下2016-03-03JS實(shí)現(xiàn)面包屑導(dǎo)航功能從零開始示例
這篇文章主要為大家介紹了JS實(shí)現(xiàn)面包屑導(dǎo)航功能從零開始示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-12-12