BOM 定时器+回调函数

最新推荐文章于 2022-11-24 20:42:27 发布

夏大爷耶耶耶

最新推荐文章于 2022-11-24 20:42:27 发布

阅读量579

点赞数 2

分类专栏： JS笔记文章标签： javascript ecmascript 前端

本文链接：https://blog.csdn.net/xy_is_fhh/article/details/121207643

版权

JS笔记专栏收录该内容

39 篇文章 3 订阅

订阅专栏

window对象提供了两种定时器：setTimeout()和setInterval()

1.setTimeout()定时器 window.setTimeout(调用函数,[延迟的毫秒数]);

用于设置一个定时器，该定时器在定时器到期后执行调用函数

注意点: ①window可省略

②延迟时间单位是毫秒，但可以省略，如果省略默认是0

③这个调用函数可以直接写函数还可以写函数名还有一个写法'函数名()'

④页面中可能有很多的定时器，我们经常给定时器加标识符（名字）

三种写法：① setTimeout(function() {

//函数体

},2000);

② function callback() { ③ function callback() {

//函数体 //函数体

} }

setTimeout(callback,2000); setTimeout('callback',2000);(不推荐！！！)

回调函数callback：普通函数是按照代码顺序直接调用，而这个函数，需要等待时间，时间到了才去调用这个函数，因此称为回调函数。

简单理解：回调，就是回头调用的意思，上一件事干完，再回头再调用这个函数

setTimeout()、element.onclick = function() {}或者element.addEventListener('click', fn);里面的函数都是回调函数。

停止setTimeout()定时器

window.clearTimeout(timeout ID) (window可省略)

clearTimeout()方法取消了先前通过调用setTimeout()建立的定时器。

2.setInterval()定时器 window.setInterval(回调函数,[间隔的毫秒数]);

setInterval()方法重复调用一个函数，每隔这个时间，就去调用一次回调函数。

注意(与setTimeout类似):1.window可省略

2.这个调用函数可以直接写函数，或者写函数名或者采取字符串'函数名()'三种形式。

3.间隔的毫秒数省略默认是0，如果写，必须是毫秒，表示每隔多少毫秒就自动调用这个函数。

4.因为定时器很多，所以经常给定时器赋值一个标识符。

setTimeout延时时间到了就去调用这个回调函数，只调用一次就结束了这个定时器

setInterval每隔这个延时时间，就去调用这个回调函数，会调用很多次，重复调用这个函数

清除定时器clearInterval()

window.clearInterval(intervalID);

clearInterval()方法取消了先前通过调用setInterval()建立的定时器。

注意：1.window可以省略

2.里面的参数就是定时器的标识符。

定时器案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        .ad {
            display: block;
        }
    </style>
</head>
<body>
    <img src="love.gif" class="ad">
</body>
<script>
    var ad = document.querySelector('.ad');
    setTimeout(function () {
        ad.style.display = 'none';
    }, 2000);
    //效果：（2000毫秒）两秒后图片消失
</script>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>停止定时</button>
</body>
<script>
    var btn = document.querySelector('button');
    var timer = setTimeout(function() {
        alert('哈');
    },3000);
    btn.addEventListener('click',function() {
        clearTimeout(timer);
    })
</script>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>setInterval</title>
</head>
<body>
    <button>停止定时</button>
</body>
<script>
    var btn = document.querySelector('button');
    var timer = setInterval(function() {
        alert('哈');
    },3000);
    btn.addEventListener('click',function() {
        clearInterval(timer);
    })
</script>
</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>倒计时效果</title>
    <style>
        span {
            display: block;
            width: 20px;
            height: 20px;
            background-color: black;
            color: #fff;
            margin-right: 2px;
            float: left;
            text-align: center;
            font-size: 13.5px;
        }
    </style>
</head>

<body>
    <span class="day">00</span>
    <span class="hour">00</span>
    <span class="minute">00</span>
    <span class="second">00</span>
</body>
<script>
    //倒计时效果
    //案例分析：1.这个倒计时是不断变化的，因此需要定时器来自动变化(setInterval)
    //2.三个黑色盒子里面分别存放时分秒
    //3.三个黑色盒子利用innerHTML放入计算的小时分钟秒数
    //4.第一次执行也是间隔毫秒数，因此刷新页面会有空白
    //5.最好采取封装函数的方式，这样可以先调用一次这个函数，防止刚开始刷新页面有空白问题
    //1.获取元素
    var day = document.querySelector('.day');//天的黑盒
    var hour = document.querySelector('.hour');//小时的黑色盒子
    var minute = document.querySelector('.minute');//分钟的黑色盒子
    var second = document.querySelector('.second');//秒数的黑色盒子
    var inputTime = +new Date('2021-11-15 00:00:00');//返回的是用户输入时间总的毫秒数
    countDown();//先调用一次这个函数，防止第一次刷新页面有空白

    //2.开启定时器
    setInterval(countDown, 1000);
    function countDown() {
        var nowTime = +new Date();//返回的是当前时间总的毫秒数
        var times = (inputTime - nowTime) / 1000;//time是剩余时间总的秒数
        var d = parseInt(times / 60 / 60 / 24);
        d = d < 10 ? '0' + d : d;
        day.innerHTML = d;
        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>

</html>

倒计时效果！！！👆

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">

	</style>
</head>
<body>
	手机号码:<input type="number"><button>发送</button>
	<script>
		//案例分析：1.按钮点击之后，会禁用disabled为true
		//2.同时按钮里面的内容会变化，注意button里面的内容通过innerHTML修改
		//3.里面秒数是有变化的，因此需要用到定时器
		//4.定义一个变量，在定时器里面，不断递减
		//5.如果变量为0说明到了时间，我们需要停止定时器，并且复原按钮初始状态
		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;//这个3需要从新开始
				} else {
					btn.innerHTML = '还剩下' + time + '秒';
					time--;
				}
			}, 1000);
		})
	</script>
</body>
</html>

发送短信案例👆

夏大爷耶耶耶

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
BOM 定时器+回调函数

window对象提供了两种定时器：setTimeout()和setInterval()1.setTimeout()定时器 window.setTimeout(调用函数,[延迟的毫秒数]); 用于设置一个定时器，该定时器在定时器到期后执行调用函数注意点: ①window可省略 ②延迟时间单位是毫秒，但可以省略，如果省略默认是0 ③这个调用函数可以直接写函数还可以写函数名还有一个写法'函数名()' ④页面中可能有...
复制链接

扫一扫