<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>定时器</title>
</head>
<body>
<div style="width: 300px;height: 200px;background-color: #EEE;" id="divid"></div>
<!-- 定时器 -->
<!-- 1.setTimeout ->一次性的 -->
<script type="text/javascript">
var timer1;
function timeout(){
timer1 = window.setTimeout("f1()",1000);
}
function f1(){
document.getElementById("divid").innerHTML += "1";
}
function closetimeout(){
window.clearTimeout(timer1);
}
</script>
<!-- 2.setInterval ->周期性的 -->
<script type="text/javascript">
var timer2;
function interval(){
timer2 = window.setInterval("f2()",1000);
}
function f2(){
document.getElementById("divid").innerHTML += "2";
}
function closeinterval(){
window.clearInterval(timer2);
}
</script>
<br><br><br>
<input type="button" onclick="timeout()" value="开启一次性定时器">
<input type="button" onclick="closetimeout()" value="关闭一次性定时器">
<br><br><br>
<input type="button" onclick="interval()" value="开启周期性定时器">
<input type="button" onclick="closeinterval()" value="关闭周期性定时器">
</body>
</html>
