本文实例为大家分享了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:秒表计时
<!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" "text-align: center"><!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 "color: #800000">注意:把总的秒数(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:时钟
<!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>以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
js,定时器
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
更新日志
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]