js定时器与数码时钟案例
开启定时器
1、setInterval 间隔型
setInterval(参数一,参数二);
第一个参数是一个函数,第二个参数是时间(单位是毫秒)
意思就是每隔多长时间执行一次函数;
2、setTimeout 延时型
只执行一次
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>定时器</title>
<script>
let show = () =>{
alert('a');
}
/* 无限执行 */
setInterval(show,1000);//第一个参数是一个函数,第二个参数是时间,单位是毫秒
//意思就是每隔1秒钟执行一次show函数
/* 只执行一次 */
setTimeout(show,1000);
</script>
</head>
</html>
两种定时器的区别
关于上述代码,setIterval(show,1000);无限弹出‘a’,而setTimeout(show,1000);只弹一次
停止定时器
想实现的功能:点击开始的时候弹’a’,点击关闭的时候停止。
首先准备两个按钮写上点击事件。
关于window.onload() 方法:
它用于在网页加载完毕后立刻执行的操作,即当 HTML 文档加载完毕后,立刻执行某个方法。
为什么要加这个方法:因为代码是从上到下加载的,但是我们的js代码写在了body前面,如果不加会找不到元素(因为那个时候body没有加载到)。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>定时器的开启与关闭</title>
<script>
window.onload = ()=>{
let oBtn1 = document.getElementById('btn1');
let oBtn2 = document.getElementById('btn2');
oBtn1.onclick = ()=>{
setInterval(() => {
alert('a');
}, 1000);
}
}
</script>
</head>
<body>
<input id="btn1" type="button" value="开启" />
<input id="btn2" type="button" value="关闭" />