JavaScript Timing 事件及兩種時鐘寫法

時間 2019-12-08

標籤 javascript timing 事件兩種時鐘寫法欄目 JavaScript 简体版

原文原文鏈接

JavaScript 能夠在時間間隔內執行。

這就是所謂的定時事件（ Timing Events）。

--------------------------------------------------------------------------------------------------------------------------------------------html

Timing 事件

window 對象容許以指定的時間間隔執行代碼。函數

這些時間間隔稱爲定時事件。spa

經過 JavaScript 使用的有兩個關鍵的方法：code

setTimeout(function, milliseconds): 在等待指定的毫秒數後執行函數。
setInterval(function, milliseconds): 等同於 setTimeout()，但持續重複執行該函數，能夠用來寫時鐘，詳情見下方例子

setTimeout() 和 setInterval() 都屬於 HTML DOM Window 對象的方法。htm

setTimeout() 方法

window.setTimeout(function, milliseconds);

window.setTimeout() 方法能夠不帶 window 前綴來編寫。對象

第一個參數是要執行的函數。blog

第二個參數指示執行以前的毫秒數。事件

實例

單擊按鈕。等待 3 秒，而後頁面會提示 "Hello"：ip

<button onclick="setTimeout(myFunction, 3000)">試一試</button>

<script>
function myFunction() {
    alert('Hello');
 }
</script>

完整實例：

<!DOCTYPE html>
<html>
<body>

<p>點擊「試一試」。等待 3 秒鐘，頁面將提示「Hello」。</p>

<button onclick="setTimeout(myFunction, 3000);">試一試</button>

<script>
function myFunction() {
  alert('Hello');
}
</script>

</body>
</html>

--------------------------------------------------------------------------------------------------------------------------------------------get

如何中止執行？

clearTimeout() 方法中止執行 setTimeout() 中規定的函數。

window.clearTimeout(timeoutVariable)

window.clearTimeout() 方法能夠不帶 window 前綴來寫。

clearTimeout() 使用從 setTimeout() 返回的變量：

myVar = setTimeout(function, milliseconds);
clearTimeout(myVar);

實例

相似上例，可是添加了「中止」按鈕：

<button onclick="myVar = setTimeout(myFunction, 3000)">試一試</button>

<button onclick="clearTimeout(myVar)">中止執行</button>

完整實例：

<!DOCTYPE html>
<html>
<body>

<p>點擊「試一試」。等 3 秒。該頁面將提醒「Hello」。</p>

<p>單擊「中止」以阻止第一個函數執行。</p>

<p>（在 3 秒鐘以前，您必須單擊「中止」。）</p>

<button onclick="myVar = setTimeout(myFunction, 3000)">試一試</button>

<button onclick="clearTimeout(myVar)">中止</button>

<script>
function myFunction() {
  alert("Hello");
}
</script>
</body>
</html>

---------------------------------------------------------------------------------------------

setInterval() 方法

setInterval() 方法在每一個給定的時間間隔重複給定的函數。

window.setInterval(function, milliseconds);

window.setInterval() 方法能夠不帶 window 前綴來寫。

第一個參數是要執行的函數。

第二個參數每一個執行之間的時間間隔的長度。

本例每秒執行一次函數 "myTimer"（就像數字手錶）。

實例

顯示當前時間：

var myVar = setInterval(myTimer, 1000);
 
function myTimer() {
    var d = new Date();
    document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}

完整實例

<!DOCTYPE html>
<html>
<body>

<p>此頁面上的腳本啓動這個時鐘：</p>

<p id="demo"></p>

<script>
var myVar = setInterval(myTimer, 1000);

function myTimer() {
  var d = new Date();
  document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}
</script>

</body>
</html>

一秒有 1000 毫秒。

--------------------------------------------------------------------------------------------------------------------------------------------

如何中止執行？

clearInterval() 方法中止 setInterval() 方法中指定的函數的執行。

window.clearInterval(timerVariable)

window.clearInterval() 方法能夠不帶 window 前綴來寫。

clearInterval() 方法使用從 setInterval() 返回的變量：

myVar = setInterval(function, milliseconds);
clearInterval(myVar);

實例

相似上例，可是咱們添加了一個「中止時間」按鈕：

<p id="demo"></p>

<button onclick="clearInterval(myVar)">中止時間</button>

<script>
var myVar = setInterval(myTimer, 1000);
 function myTimer() {
    var d = new Date();
    document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}
</script>

完整實例：

<!DOCTYPE html>
<html>
<body>

<p>此頁面上的腳本啓動這個時鐘：</p>

<p id="demo"></p>

<button onclick="clearInterval(myVar)">中止時間</button>

<script>
var myVar = setInterval(myTimer ,1000);
function myTimer() {
  var d = new Date();
  document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}
</script>

</body>
</html>

更多實例

另外一個簡單的計時

<!DOCTYPE html>
<html>
<body>

<button onclick="timedText()">試一試</button>

<p id="demo">點擊「試一試」。我將在兩秒，四秒和六秒事後顯示。</p>

<script>
function timedText() {
  setTimeout(myTimeout1, 2000) 
  setTimeout(myTimeout2, 4000) 
  setTimeout(myTimeout3, 6000) 
}
function myTimeout1() {
  document.getElementById("demo").innerHTML = "2 秒";
}
function myTimeout2() {
  document.getElementById("demo").innerHTML = "4 秒";
}
function myTimeout3() {
  document.getElementById("demo").innerHTML = "6 秒";
}
</script>

</body>
</html>


由計時時間建立的時鐘

<!DOCTYPE html>
<html>
<head>
<script>
function startTime() {
  var today = new Date();
  var h = today.getHours();
  var m = today.getMinutes();
  var s = today.getSeconds();
  m = checkTime(m);
  s = checkTime(s);
  document.getElementById('txt').innerHTML =
  h + ":" + m + ":" + s;
  var t = setTimeout(startTime, 500);
}
function checkTime(i) {
  if (i < 10) {i = "0" + i};  // 在數字 < 10 以前加零
  return i;
}
</script>
</head>

<body onload="startTime()">

<div id="txt"></div>

</body>
</html>