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 相关文章推荐
jQuery 使用手册(六)
Sep 23 Javascript
JS获取IP、MAC和主机名的五种方法
Nov 14 Javascript
js 赋值包含单引号双引号问题的解决方法
Feb 26 Javascript
JavaScript实现判断图片是否加载完成的3种方法整理
Mar 13 Javascript
基于Bootstrap3表格插件和分页插件实例详解
May 17 Javascript
js实现多图左右切换功能
Aug 04 Javascript
Bootstrap实现带暂停功能的轮播组件(推荐)
Nov 25 Javascript
angular实现表单验证及提交功能
Feb 01 Javascript
jQuery插件HighCharts绘制2D金字塔图效果示例【附demo源码下载】
Mar 09 Javascript
vue axios基于常见业务场景的二次封装的实现
Sep 21 Javascript
vue视频播放插件vue-video-player的具体使用方法
Nov 08 Javascript
解决vue中provide inject的响应式监听
Apr 19 Vue.js
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一句话cmdshell新型 (非一句话木马)
2009/04/18 PHP
与文件上传有关的php配置参数总结
2013/06/14 PHP
根据鼠标的位置动态的控制层的位置
2009/11/24 Javascript
Jquery乱码的一次解决过程 图解教程
2010/02/20 Javascript
使用Jquery Aajx访问WCF服务(GET、POST、PUT、DELETE)
2012/03/16 Javascript
textarea 控制输入字符字节数(示例代码)
2013/12/27 Javascript
一个JavaScript用逗号分割字符串实例
2014/09/22 Javascript
JS获取图片高度宽度的方法分享
2015/04/17 Javascript
Json按某个键的值进行排序
2016/12/22 Javascript
Node.JS更改Windows注册表Regedit的方法小结
2017/08/18 Javascript
vue-ajax小封装实例
2017/09/18 Javascript
详解Vue快速零配置的打包工具——parcel
2018/01/16 Javascript
vue组件开发之用户无限添加自定义填写表单的方法
2018/08/28 Javascript
Javascript实现时间倒计时功能
2018/11/17 Javascript
mock.js实现模拟生成假数据功能示例
2019/01/15 Javascript
js+canvas实现图片格式webp/png/jpeg在线转换
2020/08/22 Javascript
[02:04]2020年夜魇暗潮预告片
2020/10/30 DOTA
python对指定目录下文件进行批量重命名的方法
2015/04/18 Python
python实现比较两段文本不同之处的方法
2015/05/30 Python
Python基于win32ui模块创建弹出式菜单示例
2018/05/09 Python
matplotlib 纵坐标轴显示数据值的实例
2018/05/25 Python
Python3按一定数据位数格式处理bin文件的方法
2019/01/24 Python
解决python中显示图片的plt.imshow plt.show()内存泄漏问题
2020/04/24 Python
Pandas把dataframe或series转换成list的方法
2020/06/14 Python
Python中Selenium模块的使用详解
2020/10/09 Python
pycharm中leetcode插件使用图文详解
2020/12/07 Python
乌克兰第一的珠宝网上商店:Gold.ua
2019/11/29 全球购物
物理系毕业生自荐信
2013/11/01 职场文书
中学生自我评价范文
2014/02/08 职场文书
酒店员工职业生涯规划
2014/02/25 职场文书
离婚案件答辩状
2015/05/22 职场文书
2019年工作总结范文
2019/05/21 职场文书
导游词之云南丽江-泸沽湖
2019/09/26 职场文书
python使用tkinter实现透明窗体上绘制随机出现的小球(实例代码)
2021/05/17 Python
Linux中Nginx的防盗链和优化的实现代码
2021/06/20 Servers
python实现双向链表原理
2022/05/25 Python