一篇文章帶你學會JavaScript計時事件
JavaScript 計時事件
通過使用 JavaScript，我們有能力做到在一個設定的時間間隔之后來執(zhí)行代碼，而不是在函數(shù)被調用后立即執(zhí)行。我們稱之為計時事件。
在 JavaScript 中使用計時事件是很容易的有四個常用方法：
setInterval() - 間隔指定的毫秒數(shù)不停地執(zhí)行指定的代碼。
clearInterval() -方法用于停止 setInterval() 方法執(zhí)行的函數(shù)代碼。
setTimeout() - 在指定的毫秒數(shù)后執(zhí)行指定代碼。
clearTimeout() -方法用于停止執(zhí)行setTimeout()方法的函數(shù)代碼。
注意: setInterval() 和 setTimeout() 是 HTML DOM Window對象的兩個方法。
setInterval() 方法
setInterval() 間隔指定的毫秒數(shù)不停地執(zhí)行指定的代碼
語法：
window.setInterval(“javascript function”,milliseconds);
window.setInterval() 方法可以不使用 window 前綴，直接使用函數(shù) setInterval()。
setInterval() 第一個參數(shù)是函數(shù)（function）；第二個參數(shù)間隔的毫秒數(shù)。
注意: 1000 毫秒是一秒。
實例：
顯示當前時間
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>時鐘顯示</title>
<style>
div{
width: 300px;
height: 100px;
background-color: aquamarine;
margin: 50px auto;
text-align: center;
line-height: 100px;
border:1px solid black;
border-radius: 100px;
}
</style>
</head>
<body>
<div></div>
</body>
<script>
var divEle=document.querySelector('div');
setInterval(function(){dateTimes()},1000);
//封裝時間的函數(shù)
function dateTimes(){
var date=new Date();
var dateHours=date.getHours();
var dateMinutes=date.getMinutes();
var dateSeconds=date.getSeconds();
if(parseInt(dateHours)<10){
dateHours='0'+dateHours;
}
if(parseInt(dateMinutes)<10){
dateMinutes='0'+dateMinutes;
}
if(parseInt(dateSeconds)<10){
dateSeconds='0'+dateSeconds;
}
var xingQi=date.getDay();
var weeks=['星期日','星期一','星期二','星期三','星期四','星期五','星期六']
var dateStr=date.getFullYear()+'年'+(date.getMonth()+1)+'月'+date.getDate()
+'日，'+dateHours+":"+dateMinutes+":"+dateSeconds+'，'+weeks[xingQi];
divEle.innerText=dateStr;
// return dateStr;
}
// divEle.innerText=dateTimes();
</script>
</html>
運行效果：
clearInterval() 方法
clearInterval() 方法用于停止 setInterval() 方法執(zhí)行的函數(shù)代碼。
語法：
window.clearInterval(intervalVariable)
window.clearInterval() 方法可以不使用window前綴，直接使用函數(shù)clearInterval()。
要使用 clearInterval() 方法, 在創(chuàng)建計時方法時你必須使用全局變量：
myVar=setInterval(“javascript function”,milliseconds);
然后你可以使用 clearInterval() 方法來停止執(zhí)行。
實例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>時鐘顯示</title>
<style>
div{
width: 300px;
height: 100px;
background-color: aquamarine;
margin: 50px auto;
text-align: center;
line-height: 100px;
border:1px solid black;
border-radius: 100px;
}
button{
width: 100px;
height: 30px;
margin: 0 auto;
margin-left: 50%;
}
</style>
</head>
<body>
<div></div>
<button onclick="myStopFunction()">時間停止</button>
</body>
<script>
var divEle=document.querySelector('div');
var myVar=setInterval(function(){dateTimes()},1000);
//封裝時間的函數(shù)
function dateTimes(){
var date=new Date();
var dateHours=date.getHours();
var dateMinutes=date.getMinutes();
var dateSeconds=date.getSeconds();
if(parseInt(dateHours)<10){
dateHours='0'+dateHours;
}
if(parseInt(dateMinutes)<10){
dateMinutes='0'+dateMinutes;
}
if(parseInt(dateSeconds)<10){
dateSeconds='0'+dateSeconds;
}
var xingQi=date.getDay();
var weeks=['星期日','星期一','星期二','星期三','星期四','星期五','星期六']
var dateStr=date.getFullYear()+'年'+(date.getMonth()+1)+'月'+date.getDate()
+'日，'+dateHours+":"+dateMinutes+":"+dateSeconds+'，'+weeks[xingQi];
divEle.innerText=dateStr;
// return dateStr;
}
function myStopFunction(){
clearInterval(myVar);
}
// divEle.innerText=dateTimes();
</script>
</html>運行效果：
setTimeout() 方法
setTimeout() 在指定的毫秒數(shù)后執(zhí)行指定代碼。
語法：
myVar= window.setTimeout(“javascript function”, milliseconds);
setTimeout() 方法會返回某個值。在上面的語句中，值被儲存在名為 myVar 的變量中。假如你希望取消這個 setTimeout()，你可以使用這個變量名來指定它。
setTimeout() 的第一個參數(shù)是含有 JavaScript 語句的字符串。這個語句可能諸如 “alert(‘5 seconds!’)”，或者對函數(shù)的調用，諸如 alertMsg。
第二個參數(shù)指示從當前起多少毫秒后執(zhí)行第一個參數(shù)。
提示：1000 毫秒等于一秒。
實例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>計時器</title>
</head>
<body>
<button onclick="showAlert()">彈出警告窗</button>
</body>
<script>
var result2;
function showAlert(){
result2 =setTimeout(function(){
alert('hello html');
},3000);
}
</script>
</html>
運行效果：
clearTimeout() 方法
clearTimeout() 方法用于停止執(zhí)行setTimeout()方法的函數(shù)代碼。
語法：
window.clearTimeout(timeoutVariable)
window.clearTimeout() 方法可以不使用window 前綴。
要使用clearTimeout() 方法, 你必須在創(chuàng)建超時方法中（setTimeout）使用全局變量:
myVar=setTimeout(“javascript function”,milliseconds);
如果函數(shù)還未被執(zhí)行，你可以使用 clearTimeout() 方法來停止執(zhí)行函數(shù)代碼。
實例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>計時器</title>
</head>
<body>
<button onclick="showAlert()">彈出警告窗</button>
<button onclick="stopAlert()">停止彈出警告窗</button>
</body>
<script>
var result2;
function showAlert(){
result2 =setTimeout(function(){
alert('hello html');
},3000);
}
function stopAlert(){
clearTimeout(result2);
}
</script>
</html>
運行效果：
總結
到此這篇關于一篇文章帶你學會JavaScript計時事件的文章就介紹到這了,更多相關JavaScript計時事件內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
web開發(fā)中不可避免會使用js，為了給頁面良好的瘦身我們一般都會將js代碼放在外部，然后通過src引用，如果web頁面與js采用的編碼不同一就會產(chǎn)生亂碼，接下來與大家分享下解決方法，感興趣的朋友可以參考下哈2013-04-04
JavaScript Event事件學習第一章 Event介紹
Events是每一個JavaScript程序核心。什么是事件處理，它有什么問題和怎樣寫出跨瀏覽器的代碼，我將在這一章做一個概述。我也會提供一些有精彩的關于事件處理程序的細節(jié)的文章。2010-02-02
自定義函數(shù)實現(xiàn)IE7與IE8不兼容js中trim函數(shù)的問題
這篇文章主要介紹了自定義函數(shù)實現(xiàn)IE7與IE8不兼容js中trim函數(shù)的方法,涉及trim函數(shù)的重寫與正則匹配的技巧,需要的朋友可以參考下2015-02-02
這篇文章主要介紹了使用Vue3實現(xiàn)一個Upload組件的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-05-05
這篇文章主要介紹了淺談Webpack核心模塊tapable解析，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
iphone safari不支持position fixed的解決方法
最近一直在做移動web開發(fā)，開發(fā)過程中遇到了許多問題，mobile safari不支持position: fixed就是一件很頭疼的事情2012-05-05
這篇文章介紹了js使彈層下面body禁止?jié)L動的方法，文中通過示例代碼介紹的非常詳細。對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-06-06
瀑布流，又稱瀑布流式布局，是比較流行的一種網(wǎng)站頁面布局，這篇文章主要介紹了js實現(xiàn)瀑布流的三種方式，感興趣的小伙伴們可以參考一下2015-12-12
JavaScript實現(xiàn)數(shù)字數(shù)組按照倒序排列的方法
這篇文章主要介紹了JavaScript實現(xiàn)數(shù)字數(shù)組按照倒序排列的方法,涉及javascript中sort方法的使用技巧,非常具有實用價值,需要的朋友可以參考下2015-04-04
制作網(wǎng)頁的過程中，你有時候需要知道某個元素在網(wǎng)頁上的確切位置。2009-09-09