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
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/106490.html
標籤：JavaScript