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 相关文章推荐
JavaScript 类的定义和引用 JavaScript高级培训 自定义对象
Apr 27 Javascript
jquery下jstree简单应用 - v1.0
Apr 14 Javascript
JQuery操作表格(隔行着色,高亮显示,筛选数据)
Feb 23 Javascript
jQuery $.get 的妙用 访问本地文本文件
Jul 12 Javascript
js关闭模态窗口刷新父页面或跳转页面
Dec 13 Javascript
JS判断不能为空实例代码
Nov 26 Javascript
jquery ajax传递中文参数乱码问题及解决方法说明
Feb 07 Javascript
举例讲解Node.js中的Writable对象
Jul 29 Javascript
javascript检查某个元素在数组中的索引值
Mar 30 Javascript
Vue 实现拖动滑块验证功能(只有css+js没有后台验证步骤)
Aug 24 Javascript
如何实现iframe父子传参通信
Feb 05 Javascript
js实现日历
Nov 07 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 更新数据库中断的解决方法
2009/06/05 PHP
php 解压rar文件及zip文件的方法
2014/05/05 PHP
php绘图之在图片上写中文和英文的方法
2015/01/24 PHP
php实现的简单日志写入函数
2015/03/31 PHP
PHP实现的随机IP函数【国内IP段】
2016/07/20 PHP
使用PHP连接数据库_实现用户数据的增删改查的整体操作示例
2017/09/01 PHP
PHP实现数组向任意位置插入,删除,替换数据操作示例
2019/04/05 PHP
HR vs CL BO3 第二场 2.13
2021/03/10 DOTA
javascript语言结构小记(一)
2011/09/10 Javascript
js中hash和ico的关联分析
2015/02/05 Javascript
AngularJS中的API(接口)简单实现
2016/07/28 Javascript
微信小程序 获取微信OpenId详解及实例代码
2016/10/31 Javascript
Vue.js实现网格列表布局转换方法
2017/08/25 Javascript
vue自定义filters过滤器
2018/04/26 Javascript
jQuery实现参数自定义的文字跑马灯效果
2018/08/15 jQuery
Layui组件Table绑定行点击事件和获取行数据的方法
2018/08/19 Javascript
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
2019/05/13 jQuery
vue2之简易的pc端短信验证码的问题及处理方法
2019/06/03 Javascript
jQuery开发仿QQ版音乐播放器
2020/07/10 jQuery
ES6中的类(Class)示例详解
2020/12/09 Javascript
详解Python中DOM方法的动态性
2015/04/11 Python
Python中for循环控制语句用法实例
2015/06/02 Python
Python在信息学竞赛中的运用及Python的基本用法(详解)
2017/08/15 Python
Python实现的径向基(RBF)神经网络示例
2018/02/06 Python
python装饰器深入学习
2018/04/06 Python
儿童编程python入门
2018/05/08 Python
Python面向对象之静态属性、类方法与静态方法分析
2018/08/24 Python
python IDLE 背景以及字体大小的修改方法
2019/07/12 Python
Python按照list dict key进行排序过程解析
2020/04/04 Python
美国女性运动零售品牌:Lady Foot Locker
2017/05/12 全球购物
SmartBuyGlasses英国:购买太阳镜和眼镜
2018/01/29 全球购物
酒店优秀员工事迹材料
2014/06/02 职场文书
2014年保密工作总结
2014/11/22 职场文书
个人汇报材料范文
2014/12/30 职场文书
小学六一儿童节活动总结
2015/05/05 职场文书
毕业论文致谢词
2015/05/14 职场文书