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>