JavaScript使用setTimeout函數做出計時效果： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, init ...
JavaScript使用setTimeout函數做出計時效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="btn1">開始計時</button>
<button id="btn2">結束計時</button>
<div>0</div>
<script>
var num = 0;
var timer = null;
var div = document.querySelector("div");
var btn1 = document.querySelector("#btn1");
var btn2 = document.querySelector("#btn2");
btn1.onclick = function () {
interval(function(){
num++;
div.innerHTML = num;
}, 1000);
}
//使用setTimeout函數實現定時器
function interval(callback, time) {
timer = setTimeout(function(){
callback();
interval(callback, time);//重新調用interval(),非同步執行
}, time);
}
btn2.onclick = function(){
clearTimeout(timer);
}
</script>
</body>
</html>
index.html
