JavaScript——setTimeout()製作簡易計時器
阿新 • • 發佈：2018-12-13
不得不說，setTimeout()是一個非常神奇的東西，我們可以用它來掌控時間，從而達到意想不到的結果。
這裡先看一下setTimeout()的定義。
定義和用法
setTimeout() 方法用於在指定的毫秒數後呼叫函式或計算表示式。
提示： 1000 毫秒= 1 秒。
說白了，setTimeout()的作用就是用來設定一個時間, 時間到了, 就會執行一個指定的 method。
下面是setTimeout()方法的使用合集。
1. 延時彈框
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <p>請等待三秒鐘</p> <script> setTimeout("alert('hello，讓您久等啦！')",3000) </script> </body> </html>
開啟網頁，等待3000ms，即3s後，彈框。
當然，我們也可以通過按鈕來喚出彈窗。
<body> <p>點選按鈕，進行載入。</p> <button onclick="myFunction()">點我</button> <script> var myVar; function myFunction() { myVar = setTimeout(alertFunc, 3000); } function alertFunc() { alert("載入成功!"); } </script> </body>
執行情況如下：
2.開啟一個新視窗，等待幾秒後關閉該視窗。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <script> var myWindow = window.open("", "", "width=200, height=100"); myWindow.document.write("<p>這是一個新視窗'</p>"); myWindow.document.write("<p>本視窗將在3秒後關閉'</p>"); setTimeout(function(){ myWindow.close() }, 3000); </script> </body> </html>
執行結果如下：
3秒後該視窗關閉。
3. 計數器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<button onclick="startCount()">開始計數!</button>
<input type="text" id="txt">
<button onclick="stopCount()">停止計數!</button>
<p>點選 "開始計數!" 按鈕開始執行計數程式。</p>
<p>輸入框從 0 開始計算。 </p>
<p>點選 "停止計數!" 按鈕停止後，可以再次點選點選 "開始計數!" 按鈕會重新開始計數。</p>
<script>
var c = 0;
var t;
var timer_is_on = 0;
function timedCount() {
document.getElementById("txt").value = c;
c = c + 1;
t = setTimeout(function(){ timedCount() }, 1000);
//一秒鐘呼叫幾次timedCount函式，即每秒計數一次
}
function startCount() {
if (!timer_is_on) {
timer_is_on = 1;//判斷條件
timedCount();
}
}
function stopCount() {
clearTimeout(t);
timer_is_on = 0;//判斷條件
}
</script>
</body>
</html>這段程式碼最主要的是語句塊是
function timedCount()
{
document.getElementById("txt").value = c;
c = c + 1;
t = setTimeout(function(){ timedCount() }, 1000);
//一秒鐘呼叫幾次timedCount函式，即每秒計數一次
}timedCount函式中呼叫了setTimeout函式，通過setTimeout函式呼叫自己，而延時設定為1000，即1s，這樣就達到了每秒計時的功能。
效果如下
當然，我們真正的計時器都是會區分分鐘和秒鐘的，因此我們可以設定一個判斷條件，通過if語句來限制它，如
function timedCount( )
{ if ( x < 60 )
{ x = x + 1
document.getElementById("txt").value = c;
c = c + 1;
t = setTimeout(function(){ timedCount() }, 1000);
//一秒鐘呼叫幾次timedCount函式，即每秒計數一次
}
}
這樣的話，我們就可以做一個稍微複雜一點的計時器。程式碼如下：
<html>
<head>
<script>
x=0
y=-1
function countMin( )
{ y=y+1
document.displayMin.displayBox.value=y
setTimeout("countMin( )",60000)
}
function countSec( )
{ x = x + 1
z =x % 60
document.displaySec.displayBox.value=z
setTimeout("countSec()", 1000)
}
</script>
</head>
<body>
<table> <tr valign=top> <td> 你在本網頁的連線時間是:</td>
<td> <form name=displayMin>
<input type="text" name="displayBox"value="0" size=4 >
</form> </td>
<td> 分 </td>
<td> <form name=displaySec></td>
<td> <input type="text" name="displayBox"value="0" size=4 >
</form> </td>
<td> 秒。</td> </tr> </table>
<script>
countMin( )
countSec( )
</script>
</body>
</html>這網頁有兩個 script, 第一個是設定countSec( ) 和countMin()這兩個 function, 第二個在後的是在網頁完全載入後, 就啟動這兩個function。這個計時器並不是通過進位來實現的。countMin()函式設定六十秒後+1，countSec()函式每秒+1，這樣達到計時的效果。
執行效果如下：
這個事簡易的計時器，如果大家想更細緻一些，可以在這個基礎上新增功能。