定时器的介绍
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>定时器</title> <script> /* 定时器: 1. 每隔一段时间执行依次函数setInterval(show, 3000); 这个函数是一个间隔型的定时器, 意思就是每隔固定的时间执行依次, 如果没有设置清楚定时器的话, 它会将参数中的函数一直执行下去. 2. 延时型的定时器setTimeout(show, 1000); 意思就是在1秒后, 执行show()函数.特点是只执行一次就结束了. */ function show(){ alert('a'); } setInterval(show, 3000); setTimeout(show, 1000); </script> </head> <body> </body> </html>
定时器的开启和关闭
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>定时器</title> <script> window.onload = function(){ var oBtn1 = document.getElementById("btn1"); var oBtn2 = document.getElementById("btn2"); var timer1 = ''; var timer2 = ''; oBtn1.onclick = function(){ timer1 = setInterval(function(){ alert("间隔型定时器"); }, 3000); } oBtn2.onclick = function(){ clearInterval(timer1); } /* 当然延时型的定时器也是需要开启和关闭的,这里就不再演示了. 说明一下, 当设置了一个延时型的定时器, 时间是3秒的时候, 如果在3秒内是可以关闭定时器的. */ } </script> </head> <body> <input id="btn1" type="button" value="开启"> <input id="btn2" type="button" value="关闭"> </body> </html>
简单的数字时钟的实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>定时器</title> <script> /* 下面的这个函数的目的就是给小于10的数字前面补0, 变成两位数字组成的字符串 */ function toDou(n) { if (n < 10) { return '0' + n; } else { return '' + n; } } window.onload = function () { var oImgs = document.getElementsByTagName("img"); function tick() { var date = new Date(); var str = toDou(date.getHours()) + toDou(date.getMinutes()) + toDou(date.getSeconds()); for (let i = 0; i < oImgs.length; i++) { oImgs[i].src = "../img/" + str.charAt(i) + ".png"; // str[i]的意思是取出字符串中下标为i的字符, 很方便, 但是不兼容. // 但是在IE7以及之前的版本中是不支持这种做法的, 需要使用charAt()函数 // 考虑系统的兼容性, 建议使用charAt() } } setInterval(tick, 1000); // 由于1秒以后才会执行tick函数 tick(); // 这里需要先执行以下更新当前时间 } </script> </head> <body> <!-- 这里有个需要注意的就是, 在路径的时候, 一定要注意../时代表上级目录的意思--> <img src="../img/0.png" /> <img src="../img/0.png" /> <img src="../img/0.png" /> <img src="../img/0.png" /> <img src="../img/0.png" /> <img src="../img/0.png" /> </body> </html>