如何利用JavaScript中的定時事件做一個定時器
- 清浅原創
- 2018-11-24 13:44:043011瀏覽
在JavaScript中可以透過定時事件setInterval和clearInterval來製作定時器效果，其中setInterval方法是依照指定的週期來呼叫函數或計算表達式。
本文操作環境：Windows7系統、javascript1.8.5版、Dell G3電腦。
今天將和大家分享關於JavaScript中計時器的知識，有一定的參考價值，希望對大家有幫助。
透過JavaScript中的定時事件setInterval和clearInterval() 可以製作一個簡單的計時器效果，在接下來的文章中為大家詳細介紹。
setInterval() 方法
是依照指定的週期（以毫秒為單位）來呼叫函數或計算表達式。
setInterval(code,millisec[,"lang"])
code：要呼叫的函數或要執行的程式碼
millisec：週期性執行或呼叫code 之間的時間間隔，以毫秒為單位
#如果呼叫了setInterval() 方法那麼它就會不停地呼叫函數，直到clearInterval() 函數的出現或視窗關閉，而且setInterval() 傳回的ID 值可以用來當作clearInterval() 方法的參數。
但是setInterval() 方法的計時有一定的誤差
setTimeout() 方法
用於在指定的毫秒數後呼叫函數或計算表達式，但只呼叫一次，同樣有clearTimeout()方法用來清除setTimeout()讓他停止執行
案例分享
用setInterval() 方法寫一個兩分鐘以內的定時器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
input{
width:100px;
height:40px;
background:pink;
color:#fff;
font-size: 20px;
text-align: right;
}
</style>
</head>
<body>
分钟：<input type="text" value="0">
秒数：<input type="text" value="0">
<script src="tool.js"></script>
<script>
var minutes=document.getElementsByTagName("input")[0];
var seconds=document.getElementsByTagName("input")[1];
var minutes1=0;
var seconds1=0;
var timer=setInterval(function(){
//秒数自增，当秒数增加到60时分钟自增，秒数清零
seconds1++;
if(seconds1==60)
{
seconds1=0;
minutes1++;
}
minutes.value=minutes1;
seconds.value=seconds1;
if(minutes1==2)//到两分钟的时候定时器清除
{
clearInterval(timer);
}
},100)
</script>
</body>
</html>
總結：以上就是本篇文章的全部內容了。希望對大家學習定時事件有幫助。
以上是如何利用JavaScript中的定時事件做一個定時器的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn