2.3定时器
(1)setTimeout()
<script>
// 1.setTimeout
// window.setTimeout(调用函数,延时时间);
// 1.这个window在调用的时候可以省略
// 2.这个延时时间单位是毫秒,但是可以省略。如果省略默认是0
// 3.这个调用函数可以直接写函数 还可以写 函数名 还有一个写法 '函数名()'
// 4.页面中可能有很多个定时器,我们经常给定时器加标识符 (名字)
// setTimeout(function() {
// console.log('时间到了');
// }, 2000);
function callback() {
console.log('baozha');
}
// setTimeout(callback, 3000);
setTimeout('callback()', 3000); //不提倡
var time1 = setTimeout(callback, 3000);
var time2 = setTimeout(callback, 5000);
</script>
setTimeout()也称回调函数callback
普通函数是按照代码顺序直接调用
这个函数需要等待事件,时间到了才去调用这个函数
自动关闭广告的函数:
<img src="图片\2.png" alt="" class="ad">
<script>
var ad = document.querySelector('.ad');
setTimeout(function() {
ad.style.display = 'none';
}, 5000);
</script>
(2)停止setTimeout()定时器
window.clearTimeout(timeoutID)
<button>点击停止计时器</button>
<script>
var btn = document.querySelector('button');
var timer = setTimeout(function() {
console.log('爆炸了');
}, 5000);
btn.addEventListener('click', function() {
clearTimeout(timer);
})
</script>
(3)setInterval()
大多和setTimeout()相同,但这个方法重复调用一个函数,每隔这个时间,就去调用一次回调函数
<script>
setInterval(function() {
console.log('继续输出');
}, 1000);
</script>
(4)倒计时效果
<style>
span {
display:inline-block;
width: 50px;
height: 50px;
background-color: black;
color:aliceblue;
line-height: 50px;
text-align: center;
}
</style>
</head>
<body>
<div>
<span class="hour"></span>
<span class="minute"></span>
<span class="second"></span>
</div>
<script>
//1.获取元素
var hour = document.querySelector('.hour');
var minute = document.querySelector('.minute');
var second = document.querySelector('.second');
var inputTime = +new Date('2023-5-18 21:30:00');
countDown();//先调用一次这个函数,防止第一次刷新页面有空白。
// 2.开启定时器
setInterval(countDown, 1000);
function countDown() {
var nowTime = +new Date();
var times = (inputTime - nowTime) / 1000;
var h = parseInt(times / 60 / 60 % 24);
h = h < 10 ? '0' + h : h;
hour.innerHTML = h;
var m = parseInt(times / 60 % 60);
m = m < 10 ? '0' + m : m;
minute.innerHTML = m;
var s = parseInt(times % 60);
s = s < 10 ? '0' + s : s;
second.innerHTML = s;
}
</script>
</body>
(5)停止setInterval()定时器
<button class="begin">开启计时器</button>
<button class="stop">停止计时器</button>
<script>
var begin = document.querySelector('.begin');
var stop = document.querySelector('.stop');
var timer = null; //全局变量 null是一个空对象
begin.addEventListener('click', function() {
timer = setInterval(function() {
console.log('ni');
}, 1000);
})
stop.addEventListener('click', function() {
clearInterval(timer);
})
</script>