快捷導(dǎo)航

一篇文章帶你學(xué)會(huì)JavaScript計(jì)時(shí)事件

更新時(shí)間：2022年11月11日 10:36:58 作者：Java?Fans

JS可以實(shí)現(xiàn)很多java代碼不易完成的功能,下面這篇文章主要給大家介紹了關(guān)于如何通過一篇文章帶你學(xué)會(huì)JavaScript計(jì)時(shí)事件的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

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對象的兩個(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)行效果：

請?zhí)砑訄D片描述

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)行效果：

請?zhí)砑訄D片描述

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!’)”，或者對函數(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)行效果：

請?zhí)砑訄D片描述

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)行效果：

請?zhí)砑訄D片描述

總結(jié)

到此這篇關(guān)于一篇文章帶你學(xué)會(huì)JavaScript計(jì)時(shí)事件的文章就介紹到這了,更多相關(guān)JavaScript計(jì)時(shí)事件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: