目录
定时器
定时器分类
-
延迟定时器:多长时间之后才执行一次 (只执行一次 )
-
应用场景:广告弹出
-
-
间歇性定时器:没隔多长时间就执行一次(只要不清除就一直执行)
-
应用场景:轮播图,倒计时
-
延迟定时器:一般支持最小值4ms
间歇性定时器:一般支持最小毫秒值 10ms
定时器的设置
延迟定时器
-
基本语法:setTimeout(fun,time)
-
fun:函数,可以传递实名函数或匿名函数
-
time:时间,单位是ms(单位省略) 1s = 1000ms
-
setTimeout(function(){
console.log("哈哈哈");
},3000);
function test(){
console.log("呵呵呵");
}
setTimeout(test,6000);
延迟定时器的使用
3秒显示图片,点击关闭按钮后关闭
<div>
<img src="./img/11.jpg" alt="">
<span>X</span>
</div>
<script>
var div = document.getElementsByTagName("div")[0];
var span = document.getElementsByTagName("span")[0];
// 设置定时器
setTimeout(function () {
div.style.display = "block";
}, 3000);
span.onclick = function () {
div.style.display = "none";
}
</script>
间歇性定时器
-
基本语法:setInterval(fun,time)
-
fun:函数,可以传递实名函数或匿名函数
-
time:时间,单位是ms(单位省略) 1s = 1000ms
-
// 间歇性定时器
// 传递匿名函数
setInterval(function(){
console.log("hello world");
},1000);
// 传递实名函数
function test1(){
console.log("哈喽");
}
setInterval(test1,3000);
间歇性定时器使用(倒计时)
界面显示十秒倒计时
<span>10</span>
<script>
var span = document.getEl