传统的JavaScript获取系统时间实现简单的计时器

 
  如果想要使用JavaScript实现计时器,那么我们需要了解的三个知识点: 
 

 
setInterval 
 

 
clearInterval(id_of_setinterval) 
 

 
  setInterval 
 

 
  定义和用法 
 

 
   setInterval()方法可以按照指定的周期(以毫秒计,1000毫秒=1秒)来调用函数或计算表达式,有点类似于for,while循环,但是它们通常是自己控制自己,如果再加上想控制渲染间隔,那么使用for,while相对来说就不那么容易实现了,这时候,我们就可以使用JavaScript提供的window对象来轻松实现. 
 

 
   setInterval()方法会不停地调用函数,直到clearInterval(id_of_ setInterval)被调用或窗口被关闭.由setInterval()返回的ID值可用作为 
 

 
  clearInterval(id_of_ setInterva)方法的参数. 
 

 
  注意:如果只想执行一次可以使用seTimeout()方法. 
 

 
  返回值: 返回一个ID(数字1or0),可以将这个ID传递给clearTimeout()来取消执行 
 

 
  clearInterval(id_of_ setInterva)方法 
 

 
  id_of_ setInterva:调用setInterval()函数时所获得的返回值,使用该返回表示作为参数,可以取消该setInterval()所设定的定时执行操作.该对象无返回值 
 

 
  setTimeout()方法 
 

 
  定义和用法 
 

 
   setTimeout()方法用于在指定的毫秒数后调用函数或计算表达式 
 

 
  如果想重复执行可以使用setInterval()方法 
 

 
  想要中途阻止函数的执行可以使用clearTimeout()方法. 
 

 
  返回值: 返回一个ID(数字),可以将这个ID传递给clearTimeout()来取消执行 
 

 
  实现简单的计时器  
 

<!DOCTYPE html>
<html lang="zh">

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>Document</title>

        <script>
            function getTime() {
                var date = new Date();
                var hour = date.getHours();
                /*09:04 比9:4更加规范*/
                if(hour < 10) {
                    hour = "0" + hour;
                }
                var minute = date.getMinutes();
                if(minute < 10) {
                    minute = "0" + minute;
                }
                var second = date.getSeconds();
                if(second < 10) {
                    second = "0" + second;
                }
                str = hour + ":" + minute + ":" + second;

            }

            function setTimer() {
                getTime();
                mtimer = document.getElementById("sid");
                mtimer.innerHTML = str;
            }
            var timer;

            function stop() {
                window.clearInterval(timer);
                /*这一步不能少,需要重置参数ID,才能重新开始计时,因为
                 * 需要满足条件判断,如果没有条件判断,可省去*/
                timer = null;
            }

            function start() {
                if(timer == null) {
                    timer = window.setInterval(function() {
                        setTimer();
                    }, 1000);
                }

            }
        </script>
    </head>

    <body>
        <div>
            <span id="sid"> 13:00:20</span>
            <input type="button" value="开始计时" onclick="start()" />
            <input type="button" value="停止计时" onclick="stop()" />

        </div>
    </body>

</html>

如下动图:

传统的JavaScript获取系统时间实现简单的计时器

猜你喜欢