JavaScript定时器使用方法详解
编程学习 2021-07-04 15:02www.dzhlxh.cn编程入门
这篇文章主要介绍了JavaScript定时器的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了JavaScript定时器使用的具体代码，供大家参考，具体内容如下
定时器分类
1、循环执行：一段程序能够每间隔一段时间执行一次【setInterval()】【clearInterval()】
2、定时执行（一次定时器）：某一段程序需要在延迟多少时间后执行【setTimeout()】【clearTimeout()】
定时器使用
使用注意：为了防止定时器累加，使用定时器要先清除后设置；要保证内存中只有一个定时器。
1、循环执行：一段程序能够每间隔一段时间执行一次
设置定时器：【var timeid = window.setInterval（“方法名或方法”，“延时”）;】
清除定时器【window.clearInterval(timeid);】
// window.setInterval("console.log('1秒打印一次')", 1000);
// setInterval(function() {
// console.log('1秒打印一次');
// }, 1000);
function test() {
console.log('1秒打印一次');
}
setInterval(test, 2000);
示例1：秒表计时
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定时器计时</title>
<style>
#box {
width: 300px;
height: 200px;
border: 1px solid #ccc;
margin: 20px auto;
text-align: center;
}
.btn {
width: 100%;
margin: 10px;
}
.diaplayTime {
font-weight: 600;
font-size: 20px;
margin-top: 30px;
}
</style>
</head>
<body>
<div id="box">
<div class="btn">
<button id="btn1">开启</button>
<button id="btn2">结束</button>
<button id="btn3">清零</button>
</div>
<div class="diaplayTime">
<span>计时时间为：</span>
<span id="totalTime">0</span> 秒
</div>
</div>
<script>
window.onload = function() {
// 1.获取需要的标签
var btn1 = $("btn1");
var btn2 = $("btn2");
var btn3 = $("btn3")
var totalTime = $("totalTime");
var second = 0,
timer = null;
// 2. 开启定时器
btn1.onclick = function() {
// 定时器先清除后设置：防止定时器累加
clearInterval(timer);
// 2.1 设置定时器
timer = setInterval(function() {
second += 1;
console.log(second)
totalTime.innerHTML = second;
}, 1000);
}
// 3. 结束定时器
btn2.onclick = function() {
clearInterval(timer);
}
// 4.时间清零
btn3.onclick = function() {
clearInterval(timer);
second = 0;
totalTime.innerHTML = second;
}
}
function $(id) {
return typeof id === "string" ? document.getElementById(id) : null;
}
</script>
</body>
</html>
示例2：节假日倒计时
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定时器-放假倒计时</title>
<style>
#time {
font-size: 30px;
color: blue;
text-align: center;
}
</style>
</head>
<body>
<div id="time"></div>
<script>
window.onload = function() {
// 1.获取需要的标签
var time = document.getElementById('time');
// 2. 自定义将来的时间
var nextDate = new Date('2019/10/18 17:30:00');
// 3. 开启定时器
setInterval(function() {
// 4. 获取现在的时间
var currentDate = new Date();
// 5. 获取时间戳
var currentTime = currentDate.getTime();
var nextTime = nextDate.getTime();
// 6. 剩下的时间戳
var allTime = nextTime - currentTime;
// 7. 把毫秒转成秒
var allSecond = parseInt(allTime / 1000);
// 8.转化
var d = size(parseInt(allSecond / 3600 / 24));
var h = size(parseInt(allSecond / 3600 % 24));
var m = size(parseInt(allSecond / 60 % 60));
var s = size(parseInt(allSecond % 60));
// 9. 注入
time.innerText = "距离放假还有" + d + "天" + h + "小时" + m + "分钟" + s + "秒";
}, 1000);
// 时间显示处理
function size(num) {
return num >= 10 ? num : '0' + num;
}
}
</script>
</body>
</html>
注意：把总的秒数（allSecond）转化为 天(d)+时(h)+分(m)+秒(s)的形式，公式如下
d=parseInt(allSecond / 3600 / 24)
h=parseInt(allSecond / 3600 %24)
m=parseInt(allSecond / 60 %60)
s=parseInt(allSecond%60)
示例3：时钟
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
#box {
width: 600px;
height: 600px;
background: url("images/clock.jpg") no-repeat;
margin: 10px auto;
position: relative;
}
#hour,
#min,
#second {
position: absolute;
left: 50%;
top: 0;
width: 30px;
height: 600px;
margin-left: -15px;
}
#hour {
background: url("images/hour.png") no-repeat center center;
}
#min {
background: url("images/minute.png") no-repeat center center;
}
#second {
background: url("images/second.png") no-repeat center center;
}
</style>
</head>
<body>
<div id="box">
<div id="hour"></div>
<div id="min"></div>
<div id="second"></div>
</div>
<script>
window.onload = function() {
// 1. 获取需要的标签
var hour = document.getElementById("hour");
var min = document.getElementById("min");
var second = document.getElementById("second");
// 2.开启定时器
setInterval(function() {
// 2.1 获取当前的时间戳
var date = new Date();
// 2.2 求出总毫秒数
var millS = date.getMilliseconds();
var s = date.getSeconds() + millS / 1000;
var m = date.getMinutes() + s / 60;
var h = date.getHours() % 12 + m / 60;
// 2.3 旋转
hour.style.transform = 'rotate(' + h * 30 + 'deg)';
min.style.transform = 'rotate(' + m * 6 + 'deg)';
second.style.transform = 'rotate(' + s * 6 + 'deg)';
}, 10);
}
</script>
</body>
</html>
注意：1小时时针旋转30度，1分钟分钟旋转6度，1秒钟秒钟旋转6度。
hour.style.transform = 'rotate(' + h * 30 + 'deg)';
min.style.transform = 'rotate(' + m * 6 + 'deg)';
second.style.transform = 'rotate(' + s * 6 + 'deg)';
2、定时执行：某一段程序需要在延迟多少时间后执行
设置定时器：【var timeid = window.setTimeout(“方法名或方法”, “延时”);】
清除定时器：【window.clearTimeout(timeid);】
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定时器</title>
</head>
<body>
<button id="btn1">5秒后执行弹出对话框</button>
<button id="btn2">停止</button>
<script>
window.onload = function() {
// 1. 获取需要的标签
var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
var timer = null;
// 2. 监听按钮的点击
btn1.onclick = function() {
clearTimeout(timer);
// 一次定时器
timer = setTimeout(function() {
alert('5秒后执行弹出对话框');
}, 5000);
};
btn2.onclick = function() {
clearTimeout(timer);
}
}
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持狼蚁SEO。
上一篇：Vue项目页面跳转时浏览器窗口上方显示进度条功
下一篇：js实现时钟定时器