JavaScript定时器使用方法详解


Posted in Javascript onMarch 26, 2020

本文实例为大家分享了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:秒表计时

JavaScript定时器使用方法详解

<!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:节假日倒计时

JavaScript定时器使用方法详解

<!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:时钟

JavaScript定时器使用方法详解

<!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 相关文章推荐
Mozilla 表达式 __noSuchMethod__
Apr 05 Javascript
JavaScript判断窗口是否最小化的代码(跨浏览器)
Aug 01 Javascript
javascript调试之DOM断点调试法使用技巧分享
Apr 15 Javascript
javascript几个易错点记录
Nov 26 Javascript
Jquery实现遮罩层的方法
Jun 08 Javascript
JS实现alert中显示换行的方法
Dec 17 Javascript
用NODE.JS中的流编写工具是要注意的事项
Mar 01 Javascript
第九篇Bootstrap导航菜单创建步骤详解
Jun 21 Javascript
Bootstrap基本组件学习笔记之面板(14)
Dec 08 Javascript
javascript完美实现给定日期返回上月日期的方法
Jun 15 Javascript
uniapp微信小程序实现一个页面多个倒计时
Nov 01 Javascript
javascript实现京东快递单号的查询效果
Nov 30 Javascript
js实现时钟定时器
Mar 26 #Javascript
如何解决vue在ios微信&quot;复制链接&quot;功能问题
Mar 26 #Javascript
原生JS实现留言板
Mar 26 #Javascript
vue在线动态切换主题色方案
Mar 26 #Javascript
javascript实现简单搜索功能
Mar 26 #Javascript
jQuery实现html可联动的百分比进度条
Mar 26 #jQuery
vue+element 实现商城主题开发的示例代码
Mar 26 #Javascript
You might like
php中的一些数组排序方法分享
2012/07/20 PHP
更改localhost为其他名字的方法
2014/02/10 PHP
php对数组内元素进行随机调换的方法
2015/05/12 PHP
Linux系统下使用XHProf和XHGui分析PHP运行性能
2015/12/08 PHP
PHP有序表查找之插值查找算法示例
2018/02/10 PHP
Laravel (Lumen) 解决JWT-Auth刷新token的问题
2019/10/24 PHP
jquery 页面滚动到底部自动加载插件集合
2014/01/31 Javascript
js中实现多态采用和继承类似的方法
2014/08/22 Javascript
js实现文本框支持加减运算的方法
2015/08/19 Javascript
js获取客户端操作系统类型的方法【测试可用】
2016/05/27 Javascript
JavaScript函数节流概念与用法实例详解
2016/06/20 Javascript
Web性能优化系列 10个提升JavaScript性能的技巧
2016/09/27 Javascript
原生Javascript和jQuery做轮播图简单例子
2016/10/11 Javascript
vue仿element实现分页器效果
2018/09/13 Javascript
js判断密码强度的方法
2020/03/18 Javascript
node+vue实现文件上传功能
2020/05/28 Javascript
vue 解决IOS10低版本白屏的问题
2020/11/17 Javascript
JS hasOwnProperty()方法检测一个属性是否是对象的自有属性的方法
2021/01/29 Javascript
python 实现网上商城,转账,存取款等功能的信用卡系统
2016/07/15 Python
python实现简单爬虫功能的示例
2016/10/24 Python
Python RabbitMQ消息队列实现rpc
2018/05/30 Python
详解pandas删除缺失数据(pd.dropna()方法)
2019/06/25 Python
python3图片文件批量重命名处理
2019/10/31 Python
django框架ModelForm组件用法详解
2019/12/11 Python
深入了解如何基于Python读写Kafka
2019/12/31 Python
详解python itertools功能
2020/02/07 Python
Python 生成VOC格式的标签实例
2020/03/10 Python
pyautogui自动化控制鼠标和键盘操作的步骤
2020/04/01 Python
快速解释如何使用pandas的inplace参数的使用
2020/07/23 Python
应届生求职信写作技巧
2013/10/24 职场文书
2014年五四青年节活动策划书
2014/04/22 职场文书
《梅花魂》教学反思
2014/04/30 职场文书
领导班子作风建设年个人整改措施
2014/09/29 职场文书
2014年教师教学工作总结
2014/11/08 职场文书
2015年档案管理工作总结
2015/04/08 职场文书
Django数据库(SQlite)基本入门使用教程
2022/07/07 Python