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下的几个你可能没用过的功能
Aug 29 Javascript
深入理解JavaScript作用域和作用域链
Oct 21 Javascript
jquery中子元素和后代元素的区别示例介绍
Apr 02 Javascript
JS遍历Json字符串中键值对先转成JSON对象再遍历
Aug 15 Javascript
详解jQuery Mobile自定义标签
Jan 06 Javascript
JS实现的简单轮播图运动效果示例
Dec 22 Javascript
angular 基于ng-messages的表单验证实例
May 04 Javascript
详解Vue学习笔记入门篇之组件的内容分发(slot)
Jul 17 Javascript
简单快速的实现js计算器功能
Aug 17 Javascript
9种改善AngularJS性能的方法
Nov 28 Javascript
vue中引用swiper轮播插件的教程详解
Aug 16 Javascript
vue与django集成打包的实现方法
Nov 11 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
星际玩家的三大定律
2020/03/04 星际争霸
用PHP调用数据库的存贮过程
2006/10/09 PHP
一个颜色轮换的简单例子
2006/10/09 PHP
php magic_quotes_gpc的一点认识与分析
2008/08/18 PHP
一个PHP验证码类代码分享(已封装成类)
2011/07/17 PHP
php中$_REQUEST、$_POST、$_GET的区别和联系小结
2011/11/23 PHP
php返回当前日期或者指定日期是周几
2015/05/21 PHP
CI框架数据库查询之join用法分析
2016/05/18 PHP
轻松掌握php设计模式之访问者模式
2016/09/23 PHP
php源码 fsockopen获取网页内容实例详解
2016/09/24 PHP
PHP获取表单数据与HTML嵌入PHP脚本的实现
2017/02/09 PHP
php+mysql开发中的经验与常识小结
2019/03/25 PHP
推荐自用 Javascript 缩图函数 (onDOMLoaded)……
2007/10/23 Javascript
jquery ajax 简单范例(界面+后台)
2013/11/19 Javascript
js弹窗返回值详解(window.open方式)
2014/01/11 Javascript
jQuery分组选择器用法实例
2014/12/23 Javascript
jQuery实现鼠标划过修改样式的方法
2015/04/14 Javascript
jQuery菜单插件superfish使用指南
2015/04/21 Javascript
Js实现简单的小球运动特效
2016/02/18 Javascript
React Native实现进度条弹框的示例代码
2017/07/17 Javascript
JavaScript模拟实现封装的三种方式及写法区别
2017/10/27 Javascript
微信小程序报错: thirdScriptError的错误问题
2020/06/19 Javascript
Handtrack.js库实现实时监测手部运动(推荐)
2021/02/08 Javascript
django项目运行因中文而乱码报错的几种情况解决
2017/11/07 Python
python爬虫爬取网页表格数据
2018/03/07 Python
Python中xml和json格式相互转换操作示例
2018/12/05 Python
Jacobi迭代算法的Python实现详解
2019/06/29 Python
Pycharm 解决自动格式化冲突的设置操作
2021/01/15 Python
详解Python之Scrapy爬虫教程NBA球员数据存放到Mysql数据库
2021/01/24 Python
支票、地址标签、包装纸和慰问卡:Current Catalog
2018/01/30 全球购物
工商企业管理应届生求职信
2013/11/03 职场文书
税务会计岗位职责
2014/02/18 职场文书
2014年业务员工作总结范文
2014/11/17 职场文书
高中生军训感言
2015/08/01 职场文书
PHP 对接美团大众点评团购券(门票)的开发步骤
2021/04/03 PHP
Win11远程连接不上怎么办?Win11远程桌面用不了的解决方法
2022/08/05 数码科技