定时器setTimeout
setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。
下面是一个3秒后炸弹爆炸的例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script>
function bang() {
document.getElementsByTagName('img')[0].src='warn.png';
}
setTimeout('bang()', 3000);
</script>
</head>
<body>
<h1>定时器</h1>
<img src="boom.png" alt="" />
</body>
</html>效果如下：
3秒后转为炸弹：
setInterval实现倒计时效果
setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
下面这个炸弹爆炸的例子可看到倒计时效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script>
function bang() {
var inp = document.getElementsByName('time')[0];
var time = parseInt(inp.value) - 1;
inp.value = time;
if(time == 0) {
document.getElementsByTagName('img')[0].src = 'warn.png';
}
}
setInterval('bang()', 1000);
</script>
</head>
<body>
<h1>定时器</h1>
<input type="button" name="time" value="5" /><br >
<img src="boom.png" alt="" />
</body>
</html>
定时器终极版（爆炸后不再倒计时）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script>
function bang() {
var inp = document.getElementsByName('time')[0];
var time = parseInt(inp.value) - 1;
inp.value = time;
if(time == 0) {
document.getElementsByTagName('img')[0].src = 'warn.png';
clearInterval(clock);
}
}
var clock = setInterval('bang()', 1000);
</script>
</head>
<body>
<h1>定时器</h1>
<input type="button" name="time" value="5" /><br >
<img src="boom.png" alt="" />
</body>
</html>
循环调用爆炸效果
setTimeout实现每N秒执行一次
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script>
function bang() {
var inp = document.getElementsByName('time')[0];
var time = parseInt(inp.value) - 1;
inp.value = time;
if(time == 0) {
document.getElementsByTagName('img')[0].src = 'warn.png';
clearInterval(clock);
} else {
setTimeout('bang()',1000);
}
}
clock = setTimeout('bang()', 1000);
</script>
</head>
<body>
<h1>setTimeout实现每N秒执行一次</h1>
<input type="button" name="time" value="5" /><br >
<img src="boom.png" alt="" />
</body>
</html>