JavaScript--定時器setTimeout()、clearTimeout(var param)和setInterval()、clearInterval(var param)
阿新 • • 發佈:2018-12-24
1.setTimeout()、clearTimeout(var param)
- setTimeout() 方法用於在指定的毫秒數後呼叫函式或計算表示式,只調用一次
- clearTimeout() 方法可取消由 setTimeout() 方法設定的定時操作,引數必須是由 setTimeout() 返回的 ID 值
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> #mytime { background: #bbb; color: #fff; display: block; } .wrapper { text-align: center; width: 60%; margin: 250px auto; } </style> </head> <body> <div class="wrapper"> <h1 id=mytime>顯示時間</h1> <button id="stop" name="button" onclick="stop()">stop</button> <button id="start" name="button" onclick="start()">start</button> <button id="reset" name="button" onclick="reset()">reset</button> </div> </body> <script type="text/javascript"> var h = m = s = ms = 0; //定義時,分,秒,毫秒並初始化為0; var time = 0; function timer() { //定義計時函式 ms = ms + 50; //毫秒 if(ms >= 1000) { ms = 0; s = s + 1; //秒 } if(s >= 60) { s = 0; m = m + 1; //分鐘 } if(m >= 60) { m = 0; h = h + 1; //小時 } str = toDub(h) + "時" + toDub(m) + "分" + toDub(s) + "秒" + toDubms(ms) + "毫秒"; mytime = document.getElementById('mytime'); mytime.innerHTML = str; time = setTimeout(timer, 50); } function reset() { //重置 clearInterval(time); h = m = s = ms = 0; document.getElementById('mytime').innerHTML = "00時00分00秒0000毫秒"; document.getElementById("start").removeAttribute("disabled"); document.getElementById("stop").setAttribute("disabled", true); } function start() { //開始 time =setTimeout(timer,50); document.getElementById("start").setAttribute("disabled", true); document.getElementById("stop").removeAttribute("disabled"); } function stop() { //暫停 clearTimeout(time); document.getElementById("start").removeAttribute("disabled"); document.getElementById("stop").setAttribute("disabled", true); } function toDub(n) { //補0操作 if(n < 10) { return "0" + n; } else { return "" + n; } } function toDubms(n) { //給毫秒補0操作 if(n < 10) { return "00" + n; } else { return "0" + n; } } </script> </html>
2.setInterval()、clearInterval(var param)
- setInterval() 方法可按照指定的週期(以毫秒計)來呼叫函式或計算表示式,迴圈呼叫
- clearInterval(var param) 方法可取消由 setInterval() 函式設定的定時執行操作,引數必須是由 setInterval() 返回的 ID 值
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> #mytime { background: #bbb; color: #fff; display: block; } .wrapper { text-align: center; width: 60%; margin: 250px auto; } </style> </head> <body> <div class="wrapper"> <h1 id=mytime>顯示時間</h1> <button id="stop" name="button" onclick="stop()">stop</button> <button id="start" name="button" onclick="start()">start</button> <button id="reset" name="button" onclick="reset()">reset</button> </div> </body> <script type="text/javascript"> var h = m = s = ms = 0; //定義時,分,秒,毫秒並初始化為0; var time = 0; function timer() { //定義計時函式 ms = ms + 50; //毫秒 if(ms >= 1000) { ms = 0; s = s + 1; //秒 } if(s >= 60) { s = 0; m = m + 1; //分鐘 } if(m >= 60) { m = 0; h = h + 1; //小時 } str = toDub(h) + "時" + toDub(m) + "分" + toDub(s) + "秒" + toDubms(ms) + "毫秒"; mytime = document.getElementById('mytime'); mytime.innerHTML = str; } function reset() { //重置 clearInterval(time); h = m = s = ms = 0; document.getElementById('mytime').innerHTML = "00時00分00秒0000毫秒"; document.getElementById("start").removeAttribute("disabled"); document.getElementById("stop").setAttribute("disabled", true); } function start() { //開始 time = setInterval(timer, 50); document.getElementById("start").setAttribute("disabled", true); document.getElementById("stop").removeAttribute("disabled"); } function stop() { //暫停 clearInterval(time); document.getElementById("start").removeAttribute("disabled"); document.getElementById("stop").setAttribute("disabled", true); } function toDub(n) { //補0操作 if(n < 10) { return "0" + n; } else { return "" + n; } } function toDubms(n) { //給毫秒補0操作 if(n < 10) { return "00" + n; } else { return "0" + n; } } </script> </html>