一篇文章帶你學(xué)會(huì)JavaScript計(jì)時(shí)事件
JavaScript 計(jì)時(shí)事件
通過使用 JavaScript，我們有能力做到在一個(gè)設(shè)定的時(shí)間間隔之后來執(zhí)行代碼，而不是在函數(shù)被調(diào)用后立即執(zhí)行。我們稱之為計(jì)時(shí)事件。
在 JavaScript 中使用計(jì)時(shí)事件是很容易的有四個(gè)常用方法：
setInterval() - 間隔指定的毫秒數(shù)不停地執(zhí)行指定的代碼。
clearInterval() -方法用于停止 setInterval() 方法執(zhí)行的函數(shù)代碼。
setTimeout() - 在指定的毫秒數(shù)后執(zhí)行指定代碼。
clearTimeout() -方法用于停止執(zhí)行setTimeout()方法的函數(shù)代碼。
注意: setInterval() 和 setTimeout() 是 HTML DOM Window對(duì)象的兩個(gè)方法。
setInterval() 方法
setInterval() 間隔指定的毫秒數(shù)不停地執(zhí)行指定的代碼
語法：
window.setInterval(“javascript function”,milliseconds);
window.setInterval() 方法可以不使用 window 前綴，直接使用函數(shù) setInterval()。
setInterval() 第一個(gè)參數(shù)是函數(shù)（function）；第二個(gè)參數(shù)間隔的毫秒數(shù)。
注意: 1000 毫秒是一秒。
實(shí)例：
顯示當(dāng)前時(shí)間
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>時(shí)鐘顯示</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í)間的函數(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>
運(yùn)行效果：
clearInterval() 方法
clearInterval() 方法用于停止 setInterval() 方法執(zhí)行的函數(shù)代碼。
語法：
window.clearInterval(intervalVariable)
window.clearInterval() 方法可以不使用window前綴，直接使用函數(shù)clearInterval()。
要使用 clearInterval() 方法, 在創(chuàng)建計(jì)時(shí)方法時(shí)你必須使用全局變量：
myVar=setInterval(“javascript function”,milliseconds);
然后你可以使用 clearInterval() 方法來停止執(zhí)行。
實(shí)例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>時(shí)鐘顯示</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()">時(shí)間停止</button>
</body>
<script>
var divEle=document.querySelector('div');
var myVar=setInterval(function(){dateTimes()},1000);
//封裝時(shí)間的函數(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>運(yùn)行效果：
setTimeout() 方法
setTimeout() 在指定的毫秒數(shù)后執(zhí)行指定代碼。
語法：
myVar= window.setTimeout(“javascript function”, milliseconds);
setTimeout() 方法會(huì)返回某個(gè)值。在上面的語句中，值被儲(chǔ)存在名為 myVar 的變量中。假如你希望取消這個(gè) setTimeout()，你可以使用這個(gè)變量名來指定它。
setTimeout() 的第一個(gè)參數(shù)是含有 JavaScript 語句的字符串。這個(gè)語句可能諸如 “alert(‘5 seconds!’)”，或者對(duì)函數(shù)的調(diào)用，諸如 alertMsg。
第二個(gè)參數(shù)指示從當(dāng)前起多少毫秒后執(zhí)行第一個(gè)參數(shù)。
提示：1000 毫秒等于一秒。
實(shí)例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>計(jì)時(shí)器</title>
</head>
<body>
<button onclick="showAlert()">彈出警告窗</button>
</body>
<script>
var result2;
function showAlert(){
result2 =setTimeout(function(){
alert('hello html');
},3000);
}
</script>
</html>
運(yùn)行效果：
clearTimeout() 方法
clearTimeout() 方法用于停止執(zhí)行setTimeout()方法的函數(shù)代碼。
語法：
window.clearTimeout(timeoutVariable)
window.clearTimeout() 方法可以不使用window 前綴。
要使用clearTimeout() 方法, 你必須在創(chuàng)建超時(shí)方法中（setTimeout）使用全局變量:
myVar=setTimeout(“javascript function”,milliseconds);
如果函數(shù)還未被執(zhí)行，你可以使用 clearTimeout() 方法來停止執(zhí)行函數(shù)代碼。
實(shí)例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>計(jì)時(shí)器</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>
運(yùn)行效果：
總結(jié)
到此這篇關(guān)于一篇文章帶你學(xué)會(huì)JavaScript計(jì)時(shí)事件的文章就介紹到這了,更多相關(guān)JavaScript計(jì)時(shí)事件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
解決方案其實(shí)就是冒泡排序的一個(gè)包裝,本補(bǔ)丁不修復(fù)各瀏覽的排序算法不一致的問題2011-10-10
這篇文章主要介紹了es6函數(shù)之尾遞歸用法,結(jié)合實(shí)例形式分析了es6函數(shù)尾遞歸原理、用法及操作注意事項(xiàng),需要的朋友可以參考下2020-04-04
javascript兩種function的定義介紹及區(qū)別說明
javascript兩種function的定義方式function a(){}和a=function(){}具體使用如下，感興趣的朋友可以參考下，希望對(duì)你對(duì)你學(xué)習(xí)function的定義有所幫助2013-05-05
js實(shí)現(xiàn)網(wǎng)頁的兩個(gè)input標(biāo)簽內(nèi)的數(shù)值加減(示例代碼)
下面小編就為大家?guī)硪黄猨s實(shí)現(xiàn)網(wǎng)頁的兩個(gè)input標(biāo)簽內(nèi)的數(shù)值加減(示例代碼)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08
javascript讀取xml實(shí)現(xiàn)javascript分頁
這篇文章主要介紹了javascript讀取xml數(shù)據(jù)對(duì)其實(shí)現(xiàn)javascript分頁效果，大家參考使用吧2013-12-12
用eval方法，把傳進(jìn)來的這個(gè)方法名所代表的方法當(dāng)作一個(gè)對(duì)象來賦值給method1的func屬性,需要的朋友可以參考下2014-04-04
這篇文章主要為大家詳細(xì)介紹了Javascript 6里的4個(gè)新語法，感興趣的小伙伴們可以參考一下2016-08-08
javascript電商網(wǎng)站搶購倒計(jì)時(shí)效果實(shí)現(xiàn)
這篇文章主要介紹了javascript電商網(wǎng)站搶購倒計(jì)時(shí)效果實(shí)現(xiàn)代碼，掌握日期對(duì)象Date，獲取時(shí)間的方法，感興趣的小伙伴們可以參考一下2015-11-11
js實(shí)現(xiàn)導(dǎo)航欄中英文切換效果
本篇文章主要分享了javascript實(shí)現(xiàn)導(dǎo)航欄中英文切換效果的示例代碼，具有很好的參考價(jià)值，下面跟著小編一起來看下吧2017-01-01
JavaScript調(diào)用后臺(tái)的三種方法實(shí)例
這篇文章介紹了JavaScript調(diào)用后臺(tái)的三種方法實(shí)例，有需要的朋友可以參考一下2013-10-10