正文
day27—JavaScript实现定时器及其应用案例
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
转行学开发，代码100天——2018-04-12
JavaScript中定时器有两种，分别是setInterval和setTimeout;其用法如下：
开启：
setTimeout("function",time) 设置一个超时对象；延迟执行；只执行一次
setInterval("function",time) 设置一个超时对象；连续执行；重复执行
*上述两种方法，均有返回值，即改定时器对象。该对象可作为关闭对象输入。
关闭：
clearTimeout(对象) 清除已设置的setTimeout对象
clearInterval(对象) 清除已设置的setInterval对象
如window对象的开启及关闭
var timer = window.setInterval(express,millseconds);
window.clearInterval(timer);
var timer = window.setTimeout(express,millseconds);
window.clearTimeout(timer);
定时器启停用例：
设置两个按钮，分别控制定时器的开启和关闭
<input type="button" name="start" id="btn1" value="start">
<input type="button" name="stop" id="btn2" value="stop">
JavaScript实现定时器的启停控制
<script type="text/javascript">
//定时器用法
// var timer = window.setInterval(express,millseconds);window.clearInterval(timer);
// var timer = window.setTimeout(express,millseconds);
// window.clearTimeout(timer);
window.onload = function () {
var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
var timer = null; btn1.onclick =function(){ timer =setInterval(function()
{
alert("hello");
},1000);
}; btn2.onclick = function(){
clearInterval(timer);
}; }
</script>
点击“start”按钮，每隔一秒弹出提示框“hello”，即定时器开启;点击“stop”按钮，提示框不再弹出，即定时器关闭。
//可将代码中setInterval换成setTimeout方法，clearInterval换成clearTimeout方法，以了解其用法。
小案例展示，通过定时器，设计一个数字时钟
HTML部分：
<p>一个简单的数码时钟</p>
<div id="clock"></div>
CSS部分：
#clock{
width: 160px;
height: 80px;
background:#ccc;
font:bold 20pt sans;
border:2px solid blue;
border-radius: 12px;
line-height: 80px;
}
JavaScript部分
<script type="text/javascript">
window.onload = function showTime()
{
var clock = document.getElementById("clock");
var date = new Date();
clock.innerHTML = date.toLocaleTimeString();//显示本地时间
setTimeout(showTime,1000);
};
</script>
