定时器

最新推荐文章于 2024-07-18 15:48:23 发布

yyyyyyoow

最新推荐文章于 2024-07-18 15:48:23 发布

阅读量378

点赞数 6

文章标签：前端 javascript

本文链接：https://blog.csdn.net/mobolove/article/details/140047989

版权

定时器
1.setTimeout()
window.setTimeout(调用函数,延迟的毫秒数)
window可省略，在定时器到期后执行调用函数
延时时间单位是毫秒，可以省略延时时间，省略默认为0
//直接写函数
setTimeout(function() {
console.log('时间到了');

}, 2000);
//也可以写函数名
function callback() {
console.log('爆炸了');
}
setTimeout(callback, 3000);
setTimeout('callback()', 3000); // 我们不提倡这个写法
//页面中可能有很多个定时器，我们经常给定时器加标识符（名字）
var timer1 = setTimeout(callback, 3000);
var timer2 = setTimeout(callback, 5000);
setTimeout()这个调用函数我们也称为回调函数callback，普通函数是按照代码顺序调用的，而这个函数需要等待时间，时间到了才去调用这个函数
例 5秒关闭
<body>
<img src="images/ad.jpg" alt="" class="ad">
<script>
var ad = document.querySelector('.ad');
setTimeout(function() {
ad.style.display = 'none';
}, 5000);
</script>
</body>

停止setTimeout()定时器
window.clearTimeout(timeoutID)
window可省略
timeoutID就是定时器的标识符
<body>
<button>点击停止定时器</button>
<script>
var btn = document.querySelector('button');
var timer = setTimeout(function() {
console.log('爆炸了');

}, 5000);
btn.addEventListener('click', function() {
clearTimeout(timer);
})
</script>
</body>

2.setInterval()
window.setInterval(回调函数，间隔的毫秒数)
setInterval()方法重复调用一个函数，每隔这个时间，就去调用一次回调函数
window可以省略
例倒计时
+ 的作用：加号能够将后面new Date()对象的值转为Number类型
<body>
<div>
<span class="hour">1</span>
<span class="minute">2</span>
<span class="second">3</span>
</div>
<script>
// 1. 获取元素
var hour = document.querySelector('.hour'); // 小时的黑色盒子
var minute = document.querySelector('.minute'); // 分钟的黑色盒子
var second = document.querySelector('.second'); // 秒数的黑色盒子
var inputTime = +new Date('2024-4-20 22:00:00'); // 返回的是用户输入时间总的毫秒数
countDown(); // 我们先调用一次这个函数，防止第一次刷新页面有空白
// 2. 开启定时器
setInterval(countDown, 1000);

function countDown() {
var nowTime = +new Date(); // 返回的是当前时间总的毫秒数
var times = (inputTime - nowTime) / 1000; // times是剩余时间总的秒数
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>

停止setInterval()定时器
window.clearInterval(intervalID);
<body>
<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 hao ma');

}, 1000);
})
stop.addEventListener('click', function() {
clearInterval(timer);
})
</script>
</body>

例点击按钮后3秒之内不能点击
<body>
手机号码： <input type="number"> <button>发送</button>
<script>
var btn = document.querySelector('button');
var time = 3; // 定义剩下的秒数
btn.addEventListener('click', function () {
btn.disabled = true;
var timer = setInterval(function () {
if (time == 0) {
// 清除定时器和复原按钮
clearInterval(timer);
btn.disabled = false;
btn.innerHTML = '发送';
time = 3;
} else {
btn.innerHTML = '还剩下' + time + '秒';
time--;
}
}, 1000);

})
</script>
</body>

yyyyyyoow

关注

6
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
定时器

定时器1.setTimeout()window.setTimeout(调用函数,延迟的毫秒数)window可省略，在定时器到期后执行调用函数延时时间单位是毫秒，可以省略延时时间，省略默认为0//直接写函数setTimeout(function() { console.log('时间到了'); }, 2000);//也可以写函数名function callback() { console.log('爆炸了'); }
复制链接

扫一扫