首页 > 基础资料 博客日记
【JavaScript】定时器的使用
2024-10-08 15:00:07基础资料围观96次
本篇文章分享【JavaScript】定时器的使用，对你有帮助的话记得收藏一下，看Java资料网收获更多编程知识
文章目录
提示：以下是本篇文章正文内容，下面案例可供参考
一、JS定时器是什么？
JavaScript定时器是一种用于在指定时间间隔后执行指定函数的方法。
二、定时器的使用
1.定时器之setInterval
代码如下（示例）：
<script>
// 1. setInterval 每隔一段时间就去调用这个回调函数 重复调用
// 语法规范: window.setInterval(回调函数,间隔时间)
setInterval(function () {
console.log('继续输出')
}, 2000);
//2. setTimeout 延时时间到了，就去调用这个回调函数，只调用一次，就结束了
</script>
2.定时器之setTimeout
代码如下（示例）：
<script>
//setTimeout
//语法规范：window.setTimeout(回调函数,延迟时间)
//1. window在调用时可以省略
//2. 延时时间单位是毫秒 可以省略 省略默认是0
//3. 调用函数可以直接写函数 还可以写函数名 还有一个写法 '函数名()'
//4. 页面中可能有很多定时器 我们经常给定时器加标识符 （名字）
// setTimeout(function () {
// console.log('2000毫秒后执行')
// },
// 2000);
function boom() {
console.log('爆炸了');
}
var timer1 = setTimeout(boom, 2000);
var timer2 = setTimeout(boom, 3000);
// setTimeout('boom()', 2000); // 不提倡这个写法
</script>
setTimeout 是用于延迟单次执行，而 setInterval 用于周期性重复执行。
3.清除定时器clearInterval
代码如下（示例）：
<body>
<button class="begin">开启定时器</button>
<button class="stop">清除定时器</button>
<script>
let begin = document.querySelector('.begin');
let stop = document.querySelector('.stop');
let timer = null;
begin.onclick = function () {
timer = setInterval(function () {
console.log('定时器执行了');
}, 1000);
}
stop.onclick = function () {
clearInterval(timer);
}
</script>
</body>
4.清除定时器clearTimeout
代码如下（示例）：
<body>
<button>点击停止定时器</button>
<script>
let btn = document.querySelector('button');
let timer1 = setTimeout(function () {
console.log('2000毫秒后执行')
}, 2000);
btn.addEventListener('click', function () {
clearTimeout(timer1);
})
</script>
</body>
二、定时器实例一（发送验证码）
代码如下（示例）：
<body>
手机号：<input type="text" id="phone">
<button id="btn">发送验证码</button>
<script>
//按钮点击之后，会禁用disabled属性为true
//同时按钮里的内容会变化，注意button里面的内容通过innerHTML修改
//里面秒数的变化需要用到定时器
//定义一个变量，在定时器里，不断递减
// 如果变量为0 说明到了时间 需要停止定时器 并且复原按钮初始状态
let btn = document.getElementById('btn');
let time = 10;
btn.addEventListener('click', function () {
btn.disabled = true;
let timer = setInterval(function () {
if (time == 0) {
// 清除定时器和复原按钮
clearInterval(timer);
btn.disabled = false;
btn.innerHTML = '发送验证码';
time = 10; //重新开始
} else {
btn.innerHTML = time + 's后重新发送';
time--;
}
}, 1000);
})
</script>
</body>
实现效果
三、定时器实例二（秒杀倒计时）
这段代码实现了点击按钮后开始倒计时，倒计时期间按钮不可点击，倒计时结束后恢复可点击状态并可以再次发送验证码的功能。
1、先获取页面中的按钮元素，并添加点击事件监听器。
2、当按钮被点击时：立即禁用按钮（btn.disabled = true），防止用户短时间内频繁点击。
3、初始化倒计时时间为10秒，并启动定时器。定时器每1000毫秒（1秒）执行一次回调函数
let inputTime = +new Date(‘2024-03-29 18:00:00’);
修改具体时间，设置倒计时
代码如下（示例）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.hour,
.minute,
.second {
display: inline-block;
width: 30px;
height: 30px;
border-radius: 10%;
color: white;
background-color: black;
text-align: center;
line-height: 30px;
}
</style>
</head>
<body>
<div><span class="hour">1</span>
<span class="minute">2</span>
<span class="second">3</span>
</div>
<script>
// 1.获取元素
let hour = document.querySelector('.hour');
let minute = document.querySelector('.minute');
let second = document.querySelector('.second');
let inputTime = +new Date('2024-03-29 18:00:00'); //返回用户输入时间总的毫秒数
// 2.开启定时器
setInterval(countDown, 1000);
// 3.定义函数
function countDown() {
let nowTime = +new Date(); //返回当前时间总的毫秒数
let times = (inputTime - nowTime) / 1000; //返回剩余时间的秒数
let h = parseInt(times / 3600 % 24); //小时
h = h < 10 ? '0' + h : h;
hour.innerHTML = h; //把小时赋值给hour
let m = parseInt(times / 60 % 60); //分钟
m = m < 10 ? '0' + m : m;
minute.innerHTML = m;
let s = parseInt(times % 60); //秒
s = s < 10 ? '0' + s : s;
second.innerHTML = s;
}
</script>
</body>
</html>
文章来源:https://blog.csdn.net/zyh0815/article/details/137148008
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系邮箱：jacktools123@163.com进行投诉反馈，一经查实，立即删除！
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系邮箱：jacktools123@163.com进行投诉反馈，一经查实，立即删除！
标签：
相关文章
最新发布
点击排行
本站推荐
