JavaScript定时器使用方法详解
更新时间：2020年03月26日 14:45:51 作者：maidu_xbd
这篇文章主要介绍了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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了javascript中如何快速获取数组最后一个值问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-01-01
理解javascript函数式编程中的闭包（closure）
这篇文章主要帮助大家理解javascript函数式编程中的闭包（closure）概念，通俗地讲， JavaScript 中每个的函数都是一个闭包，感兴趣的小伙伴们可以参考一下2016-03-03
window.name 的美妙之处：name 值在不同的页面（甚至不同域名）加载后依旧存在，并且可以支持非常长的 name 值（2MB）。2008-09-09
在做网站的时候，往往图片的处理很重要，固定尺寸容易变形拉伸，不固定又会有不可预知的问题，有可能撑开页面。2009-08-08
这篇文章主要介绍了JavaScript使用concat连接数组的方法,实例分析了javascript中concat函数操作数组的技巧,需要的朋友可以参考下2015-04-04
这篇文章主要介绍了JavaScript变量中var,let和const的区别,JavaScript中一共有3种用来声明变量的关键字，分别是var、let和const,文章通过围绕主题展开对三个关键词的详细介绍，需要的朋友可以参考一下2022-09-09
这篇文章主要介绍了小程序异步问题之多个网络请求依次执行并依次收集请求结果，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-05-05
这篇文章主要介绍了细述Javascript的加法运算符的具体使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-10-10
这篇文章主要为大家详细介绍了微信小程序实现购物车页面，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
从基础开始建立一个JS代码库，更新中 有心人会领技术走的更远2009-07-07
最新评论