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事件冒泡,获取控件ID值
Jun 27 Javascript
javascript for循环从入门到偏门(效率优化+奇特用法)
Aug 01 Javascript
Firefox和IE兼容性问题及解决方法总结
Oct 08 Javascript
js设置文本框中焦点位置在最后的示例代码(简单实用)
Mar 04 Javascript
javascript正则表达式使用replace()替换手机号的方法
Jan 19 Javascript
JS实现表格数据各种搜索功能的方法
Mar 03 Javascript
JS简单实现自定义右键菜单实例
May 31 Javascript
angular.js中解决跨域问题的三种方式
Jul 12 Javascript
前端跨域的几种解决方式总结(推荐)
Aug 16 Javascript
angular4 如何在全局设置路由跳转动画的方法
Aug 30 Javascript
浅谈React之状态(State)
Sep 19 Javascript
详解如何修改 node_modules 里的文件
May 22 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自带的进位制之间的转换函数
2013/06/08 PHP
php制作简单模版引擎
2016/04/07 PHP
PHP将MySQL的查询结果转换为数组并用where拼接的示例
2016/05/13 PHP
php语言注释,单行注释和多行注释
2018/01/21 PHP
Yii框架应用组件用法实例分析
2020/05/15 PHP
select标签模拟/美化方法采用JS外挂式插件
2013/04/01 Javascript
客户端js判断文件类型和文件大小即限制上传大小
2013/11/20 Javascript
js实现弹窗插件功能实例代码分享
2013/12/12 Javascript
利用Jquery实现可多选的下拉框
2014/02/21 Javascript
手写的一个兼容各种浏览器的javascript getStyle函数(获取元素的样式)
2014/06/06 Javascript
分享几种比较简单实用的JavaScript tabel切换
2015/12/31 Javascript
JavaScript数据存储 Cookie篇
2016/07/02 Javascript
JS实现获取当前URL和来源URL的方法
2016/08/24 Javascript
js实现对table的增加行和删除行的操作方法
2016/10/13 Javascript
基于JS快速实现导航下拉菜单动画效果附源码下载
2016/10/27 Javascript
深入理解Vue2.x的虚拟DOM diff原理
2017/09/27 Javascript
React中使用UEditor百度富文本的方法
2018/08/22 Javascript
Vue.js+cube-ui(Scroll组件)实现类似头条效果的横向滚动导航条
2019/06/24 Javascript
layui-tree实现Ajax异步请求后动态添加节点的方法
2019/09/23 Javascript
Python文件夹与文件的操作实现代码
2014/07/13 Python
在Python中使用HTML模版的教程
2015/04/29 Python
对Python中Iterator和Iterable的区别详解
2018/10/18 Python
python爬虫-模拟微博登录功能
2019/09/12 Python
如何使用Python抓取网页tag操作
2020/02/14 Python
python序列类型种类详解
2020/02/26 Python
Python Django2 model 查询介绍(条件、范围、模糊查询)
2020/03/16 Python
pandas数据拼接的实现示例
2020/04/16 Python
Python bisect模块原理及常见实例
2020/06/17 Python
美国真皮手袋品牌:GiGi New York
2017/03/10 全球购物
十佳大学生村官事迹
2014/01/09 职场文书
喜之郎果冻广告词
2014/03/20 职场文书
对外汉语专业大学生职业生涯规划书
2014/10/11 职场文书
2015年大学生社会实践评语
2015/03/26 职场文书
工厂采购员岗位职责
2015/04/07 职场文书
微软PC Health Check电脑健康状况检查应用下载(Win11配置检测工具)
2021/06/26 数码科技
Python与C++中梯度方向直方图的实现
2022/03/17 Python