<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" name="btn1" id="btn1" value="启动按钮" />
<input type="button" name="" id="btn2" value="停止按钮" />
<div id="div1">
</div>
<script>
// 延时器
function delay1(){alert("你好")}
setTimeout(delay1,5000);
// 定时器1在文档中写入
var body=document.body;
function interval1(){i++;body.innerHTML=i;}
var i =0;
setInterval(interval1,1000);
// 定时器2
var div1=document.getElementById("div1");
function interval2(){i++;div1.innerHTML=i;}
var i =0;
setInterval(interval2,1000);
// 定时器停止
var div1=document.getElementById("div1");
function interval3(){i++;div1.innerHTML=i;}
// 回调函数:在setIntervel函数中该函数反复使用
var i =0;
var timer3=setInterval(interval3,1000);
// 给一个点击停止按钮
var btn1=document.getElementById("btn2");
// 给按钮添加点击停止动作
btn2.onclick=function(){clearInterval(timer3);}
</script>
</body>
</html>
定时器销毁
<input type="button" name="btn1" id="btn1" value="启动按钮" />
<input type="button" name="" id="btn2" value="停止按钮" />
<div id="div1">
<script>
// 定时器再次点击重新开始
var div1=document.getElementById("div1");
// 给一个点击停止按钮
var btn1=document.getElementById("btn1");
// 给按钮添加点击停止动作
var timer=null;
btn1.onclick=function(){
var i =0;
// 在事件中添加销毁定时器的按钮
clearInterval(timer);
timer=setInterval(function() {i++;div1.innerHTML=i;},1000);
}
</script>