一：setTimeout() 定时器
1 ） 语法规范： window.setTimeout(调用函数，延时时间)； 书写时window可以省略
注意：
1.这个window在调用的时候可以省略
2.这个延时时间单位是毫秒，但是可以省略，如果省略，默认是0
3.这个调用函数可以直接写函数，还可以写函数名，还有一个写法'函数名（）'但是最后一种写法极度不提倡该写法
4.页面中可能有很多定时器，我们经常给定时器加标识符（名字）
// 写法一：
setTimeout(function(){
alert('你可真是个大聪明')
},2000);
//写法二：
// 先定义一个函数
function callback(){
alert('你可真是个大聪明')
}
// // 然后setTimeout 直接调用该函数就可以，但是第一个调用函数的时候不需要加上小括号，直接写函数名调用即可，后面跟着的还是毫秒数
var time1 = setTimeout(callback,3000);
var time2 = setTimeout(callback,5000);
// 这两个都可以使用，不会出现重复的和冲突的问题，但是我们给他们命名不同的名字就可以得到不同的定时器2）停止 setTimeout()定时器 ，通过clearTimeout() 就可以停止定时器
clearTimeout() 括号里面的参数是定时器的标识符，也就是定时器的名字，正常情况下，我们写计时器的时候，都会给他附上标识符，所以我们要停止计时器的时候，只需要在clearTimeout() 括号里面加上计时器名字就可以暂停
<button>点击停止定时器</button>
var time = setTimeout(function() {
alert('你可真是个大聪明')
}, 5000);
window.addEventListener('load',function(){
var btn = document.querySelector('button');
btn.addEventListener('click',function(){
clearTimeout(time)
})
})案例：广告显示五秒之后广告自动消失
核心思路：5秒之后，把这个广告隐藏起来 用定时器setTimeout计时器
<img src="image/ad.jpg" alt="">
<script>
var img = document.querySelector('img');
setTimeout(function(){
img.style.display = 'none'
},5000)案例：图片的消失（解题思路大致是相同的）
<style>
div{
width: 250px;
height: 50px;
margin: 20px auto;
text-align: center;
color: red;
}
img{
display: block;
width: 300px;
margin: 0 auto;
}
button{
display: block;
border-style: none;
border-radius: 5px;
margin: 10px auto;
cursor: pointer;
}
</style>
</head>
<body>
<button>查看回忆</button>
<div></div>
<img src="image/3.webp" alt="">
<script>
var div = document.querySelector('div');
var img = document.querySelector('img');
var btn = document.querySelector('button')
var time = 5 ;
btn.addEventListener('click',function(){
var timer = setInterval(function(){
if(time == 0){
img.style.display = 'none';
// 当倒计时的时间为 0 的时候，img的图片自动进行隐藏
div.innerHTML = '';
// div里面的内容变成空
clearInterval(timer);
// 同时清除定时器
time = 5;
// 并给定时器赋值，作为下一次定时器开始的时间
btn.innerHTML = '查看回忆'
// 并将button里面的内容变为原来的内容
}else{
img.style.display = 'block';
// 计时器不为 0 的时候，让图片显示出来
div.innerHTML = '值得纪念的图片将在'+time+'秒后消失';
// 并将div里面的内容更改为还剩几秒之后结束
time--;
// 里面的倒计时每一秒都在变化，所以让他进行自减的操作
btn.innerHTML = '回忆总想哭'
// 当用户点击之后，给button附上新的内容
}
},1000)
})
</script>二：setInterval()定时器
1）语法规范：window.setInterval(调用函数，延时时间) 书写时window可以省略
setTimeout() 和 setInterval() 这两个定时器的区别：
1.setTimeout() 延时时间到了 ，就去调用这个回调函数，只调用一次，就结束了这个定时器
2.setInterval() 每隔这个延时时间，就去调用这个回调函数，会一直重复调用这个函数
2）停止 setInterval()定时器 ，通过 clearInterval() 函数来暂停该计时器
setInterval() 括号里面的参数是定时器的标识符，也就是定时器的名字，正常情况下，我们写计时器的时候，都会给他附上标识符，所以我们要停止计时器的时候，只需要在 clearInterval() 括号里面加上计时器名字就可以暂停
window.addEventListener('load', function() {
var begin = document.querySelector('.begin');
var stop = document.querySelector('.stop');
var time = null;
begin.addEventListener('click', function() {
time = setInterval(function() {
// alert('坚哥真是个大聪明')
console.log('坚哥真是个大聪明')
}, 1000);
})
stop.addEventListener('click', function() {
clearInterval(time);
})
})
</script>
<button class="begin">开启定时器</button>
<button class="stop">停止定时器</button>
案例：京东倒计时案例
案例分析：1）这个倒计时是不断变化的，因此需要定时器来自动变化（setInterval)
2)三个黑盒子里面分别存放时分秒
3）三个黑盒子利用innerHTML放入计算的小时分钟秒数
4）第一次执行也是间隔毫秒数，因此刚刚刷新页面的时候会有一片空白
5）最好采取封装函数的方式，这样可以先调用一次这个函数，防止刚刚开始刷新页面会有空白问题
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 250px;
height: 200px;
background-color: pink;
margin: 0 auto;
}
.timeout {
height: 50px;
line-height: 50px;
text-align: center;
position: relative;
}
.timeout:before {
content: '';
display: inline-block;
position: absolute;
width: 250px;
height: 1px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: pink;
}
p {
text-align: center;
color: #fff;
padding-top: 100px;
}
span {
display: inline-block;
width: 30px;
height: 30px;
background-color: #333;
font-size: 20px;
color: #fff;
line-height: 30px;
}
</style>
</head>
<body>
<div class="box">
<p>本场距离结束还剩</p>
<div class="timeout">
<span class="day">0</span>
<i>天</i>
<span class="hour">1</span>
<i>时</i>
<span class="minute">2</span>
<i>分</i>
<span class="second">3</span>
<i>秒</i>
</div>
</div> <script>
// 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('2022-8-28 18:00:00');
// 返回的是用户输入时间总的毫秒数
countDown();
// 我们先调用一次这个函数，防止第一次刷新页面有空白
// 2. 开启定时器
setInterval(countDown, 1000);
function countDown() {
var nowTime = new Date();
// 返回的是当前时间总的毫秒数
var times = (inputTime - nowTime) / 1000;
// times是剩余时间总的秒数
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>案例：发送短息案例：当用户点击发送短信按钮后，该按钮在60秒之内不能再次被点击，防止重复发送短息
案例分析：1）按钮被点击之后，我们就会禁用这个按钮，用disabled 为true
2）同时按钮里面的内容也是随之变化的，注意button里面的内容是通过innerHTML 来进行修改的
3）里面的秒数也是一秒钟变化一次的，因此需要用到定时器
4）定义一个变量，在定时器里面，不断进行递减
5）如果变量为0，说明时间已经到了，我们需要停止定时器，并且将按钮恢复为初始状态
手机号码：<input type="number" >
<button>发送</button>
<script type="text/javascript">
var btn = document.querySelector('button');
var time = 5;
//这里声明的是用户点击发送按钮之后，还需要多长时间才能重新点击按钮获取短信
btn.addEventListener('click', function() {
// 这里的btn可以更改为this，因为这里this指向的是函数的调用者，这里的函数调用者是button
btn.disabled = true;
//用户点击按钮之后，需要直接将按钮进行禁用，需要等倒计时时间到达之后，才可以重新点击
// 因为里面的倒计时按钮一秒钟变化一次，所以需要添加定时器，让他一秒钟变化一次
var timer = setInterval(function() {
// 对倒计时时间进行一个判断，如果时间到达，就恢复按钮的状态和清除定时器，并将按钮的内容恢复为发送
if (time == 0) {
btn.disabled = false;
// 这里的btn不能更改为this，因为这里的this指向的函数调用者是setInterval 定时器，而setInterval 定时器里面的this指向的是window ， 所以这里就不能将btn更改为this
btn.innerHTML = '发送';
clearInterval(timer)
// 这里需要对time进行重新赋值，当用户点击下发送按钮之后，倒计时开始时间还是从原来的数字开始倒数
time = 5;
} else {
btn.innerHTML = '还剩下' + time + '秒';
time--;
}
}, 1000)
})
</script>案例：定时器案例，图片的消失
<style>
img {
width: 200px;
position: absolute;
left: 600px;
top: 200px;
}
.btn1 {
display: inline-block;
width: 150px;
height: 30px;
}
.btn2 {
display: inline-block;
width: 100px;
height: 30px;
}
</style>
</head>
<body>
<button class="btn1">点击开始魔鬼的步伐</button>
<button class="btn2">步伐个得</button>
<img src="image/3.webp" alt="">这个是使用两个按钮进行动画的显示：
function getRandom(max, min) {
return Math.floor(Math.random() * (max - min) + min);
//最大值和最小值都可以取到
}
var img = document.querySelector('img');
var btn1 = document.querySelector('.btn1');
var btn2 = document.querySelector('.btn2');
var x = img.offsetLeft;
var y = img.offsetTop;
btn1.addEventListener('click', function() {
// 没有声明直接进行赋值操作得变量，称之为全局变量，可以在整个作用域进行使用
timer = setInterval(function() {
var imgLeft = img.offsetLeft + getRandom(200, -200);
var imgTop = img.offsetTop + getRandom(200, -200);
if (imgLeft <= 0 || imgLeft >= 1200 || imgTop <= 0 || imgTop >= 600) {
img.style.left = x;
img.style.top = y;
} else {
img.style.left = imgLeft + 'px'
img.style.top = imgTop + 'px'
}
}, 50)
})
btn2.addEventListener('click',function(){
clearTimeout(timer)
})这里是使用一个代码是动画进行显示的：
function getRandom(max, min) {
return Math.floor(Math.random() * (max - min) + min);
//最大值和最小值都可以取到
}
var img = document.querySelector('img');
var btn1 = document.querySelector('.btn1');
var x = img.offsetLeft;
var y = img.offsetTop;
var flag = true;
btn1.addEventListener('click',function(){
if(flag){
// 第一次解题，没有将timer 声明为全局变量进行使用
timer = setInterval(function() {
var imgLeft = img.offsetLeft + getRandom(200, -200);
var imgTop = img.offsetTop + getRandom(200, -200);
if (imgLeft <= 0 || imgLeft >= 800 || imgTop <= 0 || imgTop >= 400) {
img.style.left = x;
img.style.top = y;
} else {
img.style.left = imgLeft + 'px'
img.style.top = imgTop + 'px'
}
}, 50);
btn1.innerHTML = '点击关闭';
flag= false;
}else {
clearTimeout(timer);
btn1.innerHTML = '点击开始魔鬼的步伐';
flag = true;
}
})
本文含有隐藏内容，请 开通VIP 后查看