iT邦幫忙

2021 iThome 鐵人賽

DAY 26
0
自我挑戰組

開始入坑網頁吧!系列 第 26

JavaScript DOM | Window Object

使用Window 的方法可以省略掉 Window 字眼
EX:

window.alert('Hi!');//Hi!
alert('Hi!');//Hi!

setInterval() 與 clearInterval()

setInterval() 方法可按照指定的週期 (以毫秒計) 呼叫某函式。
setInterval() 會不斷調用函數,直到 clearInterval() 被呼叫或 Window 被關閉。

語法:
setInterval(函數,毫秒);

EX:

function sayHi(){
setInterval(function(){
alert('Hi!');
},1000)
};

sayHi();//每秒都會 alert 'Hi!'


下面是使用 clearInterval()

<!DOCTYPE html>
<html>
<body>



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

<button onclick="myStopFunction()">Stop</button>

<script>
var myVar = setInterval(num, 1000);
var d=0;
function num() {
  d++;
  document.getElementById("demo").innerHTML = d;
}

function myStopFunction() {
  clearInterval(myVar);
}
</script>

</body>
</html>


如果用 addEventListener() 註冊事件

語法document.addEventListener(觸發事件, 觸發時執行的函數, useCapture[可選])
上面的範例用 addEventListener() 可以這樣寫:

<!DOCTYPE html>
<html>
<body>



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

<button>Stop</button>

<script>
var myVar = setInterval(num, 1000);
var d=0;
function num() {
  d++;
  document.getElementById("demo").innerHTML = d;
}

document.querySelector("button").addEventListener("click",myStopFunction);

function myStopFunction() {
  clearInterval(myVar);
}
</script>

</body>
</html>


參考資料:
W3schools | Window clearInterval() Method

W3schools Window | setInterval() Method

W3schools | document.addEventListener() Method


上一篇
JS DOM(文件物件模型)
下一篇
JavaScript Document Object
系列文
開始入坑網頁吧!30

尚未有邦友留言

立即登入留言