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>