点击刷新
在JavaScript中，定时器有两个方法，分别是setInterval()和setTimeOut()，下面分别介绍着两个方法。
setInterval()
setInterval()是指按照指定的周期（以毫秒数计）来调用函数或计算表达式。方法会不停地调用函数直到clearInterval()被调用或者窗口被关闭。该方法接收三个参数：code、millisec和lang。
- code：要调用的函数或要执行的代码串，必选
- millisec：周期性执行或调用code之间的时间间隔，以毫秒计，必选
- lang：JScript、VBScript或JavaScript，可选
下面介绍一个实例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>定时器</title> </head> <body> <input type="text" id="clock" /> <button onclick="int=window.clearInterval(int)">停止</button> <script> var int=self.setInterval("clock()",1000); function clock() { var d=new Date(); var t=d.toLocaleTimeString(); document.getElementById("clock").value=t; } </script> </body> </html>
在上面的实例中，每1000毫秒执行一次clock函数，实现了下面的时间实时显示的效果，当用户点击停止时，时间停止。
setTimeOut()
setTimeOut()是在指定的毫秒数后调用函数或计算表达式，该方法的参数和setInterval()相同，下面也是用一个实例来具体展示。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>定时器</title> </head> <body> <p>点击按钮，在等待 3 秒后弹出 "Hello"。</p> <button onclick="myFunction()">点我</button> <script> function myFunction() { setTimeout(function(){alert("Hello")},3000); } </script> </body> </html>
上面的实例中，是在3000毫秒后执行前面的代码：当点击按钮后开始计时，3000毫秒后弹出“Hello”
相关实例
倒计时
最简单的倒计时效果是在获取验证码等时候常见的60秒倒计时，其基本原理是每一秒钟就更新一次元素的内容。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>定时器</title> </head> <body> <p><span id="time">60</span>s</p> <script> window.onload = function () { var timer = setInterval(function () { document.getElementById("time").innerText -= 1; // 判断 if( document.getElementById("time").innerText === "0"){ // 清除定时器 clearInterval(timer); //执行相关方法函数 } }, 1000); } </script> </body> </html>
还有一种常见的节假日倒计时，实现原理和上面基本相同，实现上面稍微复杂一点：我们需要获取将来节假日的事件，和现在的事件，获取两个事件的事件戳，然后进行转换，因为现在的时间一直在变，所以我们需要在定时间中进行计算。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> #time{ font-size: 40px; color: red; 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('2018/10/01 00:00: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>
时钟
接下来要实现的是一个模拟的时钟效果，
要实现上面的时钟，需要有表盘、时针、分针和秒针，然后根据实际时间计算时分秒分别每隔多久旋转多少度。
具体实现代码如下：
<!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 () { //获取需要的标签 var hour = document.getElementById("hour"); var min = document.getElementById("min"); var second = document.getElementById("second");
setInterval(function () { //获取当前的时间戳 var date = new Date(); //求出总毫秒数 var millS = date.getMilliseconds(); var s = date.getSeconds() + millS / 1000; var m = date.getMinutes() + s / 60; var h = date.getHours() % 12 + m / 60; //旋转 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>
时钟实例完整详细代码下载：点这里
© 著作权归作者所有
举报
相关热门文章
发表评论
0/200
