demo | 用JavaScript写一个简易的计时器，实现开始计时、暂停计时、继续计时、重置的功能。

最新推荐文章于 2023-01-03 10:54:56 发布

yanwuhc

最新推荐文章于 2023-01-03 10:54:56 发布

阅读量3k

点赞数 5

分类专栏： JavaScript 自学文章标签： js javascript

本文链接：https://blog.csdn.net/weixin_44303404/article/details/106654900

版权

JavaScript 同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

自学

11 篇文章 0 订阅

订阅专栏

本文深入探讨了JavaScript中创建可暂停与恢复的计时器的技巧，通过使用两个计时变量和一个判断变量，实现了计时器的精确控制。文章详细解释了如何避免在暂停后无法继续计时的问题，并提供了完整的代码示例。

摘要由CSDN通过智能技术生成

今天学到了JavaScript的计时对象模型，于是心血来潮，做了一个简单的计时器。完整代码如下：

<!-- 一个简易的计时器，没有经过美化处理 -->
<html>
    <head>
        <meta http-equiv="content-type" content="txt/html; charset=utf-8"/>
    </head>

    <script>
        // 定义三个时间变量
        var hour=0;
        var minute=0;
        var second=0;

        // 定义两个参数变量，进行轮流计时。
        var countTime1;
        var countTime2;

        // 定义一个函数切换变量，用于进行参数切换。
        var judgement = true;

        // 重置函数
        function setZero(){
            hour = 0;
            minute = 0;
            second = 0;
            document.getElementById("print").innerHTML = hour+":"+minute+":"+second;
        }

        //计时函数
        function countTime(){
            second += 1;
            if(second==60){
                second = 0;
                minute += 1;
                if(minute==60){
                    hour += 1;
                }
            }
            // 进行显示
            document.getElementById("print").innerHTML=hour+":"+minute+":"+second;
        }

        // 开始计时
        function beginCount(){
            if(judgement==true){
                countTime1 = setInterval(countTime,1000);
            }
            else if(judgement == false){
                countTime2 = setInterval(countTime,1000);
            }
        }

        // 暂停计时
        function stopCount(){
            if(judgement==true){
                var stop1 = clearInterval(countTime1);
                judgement = false;
            }
            else if(judgement==false){
                var stop2 = clearInterval(countTime2);
                judgement = true;
            }
        }

    </script>
    <body>
        <!-- 用于显示时间 -->
        <div id="print"></div>
        <button onclick="beginCount()">开始计时</button>
        <button onclick="stopCount()">暂停计时</button>
        <button onclick="setZero()">重新开始计时</button>
    </body>
</html>

最终效果如下：
在这里插入图片描述
对于上面定义两个变量作为计时变量以及定义一个参数切换，讲一讲其中的过程。

		// 定义两个参数变量，进行轮流计时。
        var countTime1;
        var countTime2;

        // 定义一个函数切换变量，用于进行参数切换。
        var judgement = true;

一开始写的时候，代码其实是下面这样的：

<!-- 简易计时器 -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        
    <script>
        // 定义三个时间变量
        var hour=0;
        var minute=0;
        var second=0;
        // 定义一个计时变量
        var countTime;

        // 重置函数
        function setZero(){
            hour = 0;
            minute = 0;
            second = 0;
            document.getElementById("print").innerHTML = hour+":"+minute+":"+second;
        }

        //计时函数
        function countTime(){
            second += 1;
            if(second==60){
                second = 0;
                minute += 1;
                if(minute==60){
                    hour += 1;
                }
            }
            // 进行显示
            document.getElementById("print").innerHTML=hour+":"+minute+":"+second;
        }

        // 开始计时
        function beginCount(){
            countTime = setInterval(countTime,1000);
        }

        // 暂停计时
        function stopCount(){
            var stopTime = clearInterval(countTime);
        }

    </script></head>

    
    <body>
        <!-- 用于显示时间 -->
        <div id="print"></div>
        <button onclick="beginCount()">开始计时</button>
        <button onclick="stopCount()">暂停计时</button>
        <button onclick="beginCount()">继续计时</button>
        <button onclick="setZero()">重新开始计时</button>
</body></html>

和后来写的代码的区别在于这里只用了一个控制计时的变量。
最终的结果是这样的：
在这里插入图片描述
但这样的写法有个问题：暂停计时之后就无法继续计时。
原因在于clearInterval结束了countTime变量的重复执行。

var stopTime = clearInterval(countTime);

后来查找了相关资料，有人说可以重新添加新的变量重复执行这个函数。于是我对最初的代码进行了修改，添加了一个新的变量进行测试。

<script>
    // 定义三个时间变量
    var hour=0;
    var minute=0;
    var second=0;

    // 多定义一个时间变量
    var countTime1;
    var countTime2;

    // 重置函数
    function setZero(){
        hour = 0;
        minute = 0;
        second = 0;
        document.getElementById("print").innerHTML = hour+":"+minute+":"+second;
    }
    //计时函数
    function countTime(){
        second += 1;
        if(second==60){
            second = 0;
            minute += 1;
            if(minute==60){
                hour += 1;
            }
        }
        // 进行显示
        document.getElementById("print").innerHTML=hour+":"+minute+":"+second;
    }

    // 开始计时
    function beginCount(){
         countTime1 = setInterval(countTime,1000);
    }

    // 暂停计时1
    function stopCount1(){
        var stopTime = clearInterval(countTime1);
    }

    // 开始计时2
    function beginCount2(){
        countTime2 = setInterval(countTime,1000);
    }

    // 暂停计时2
    function stopCount2(){
        var stopTime2 = clearInterval(countTime2);
    }
</script>

<body>
  <!-- 用于显示时间 -->
  <div id="print"></div>
  <button onclick="beginCount()">开始计时</button>
  <button onclick="stopCount1()">暂停计时</button>
  <button onclick="beginCount2()">继续计时</button>
  <button onclick="stopCount2()">暂停计时2</button>
  <button onclick="setZero()">重新开始计时</button>
</body>

结果如下：
在这里插入图片描述
测试发现，【开始计时】后按下【暂停计时】可以实现暂停计时，接着按下【继续计时】，可以接着继续计时；但此时如果按下【暂停计时】计时不会暂停，需要按下【暂停计时2】计时才会暂停。这是因为变量的缘故。

此时如果想要继续计时，按下【继续计时】是没有反应的，原因在于countTime2变量被设置了clearInterval（跟最初的代码一样的原因）。

所以此时如果需要继续计时，按下【开始计时】就可以实现。这感觉是如果不是同一个变量，就可以实现计时的开始和暂停。

后来为了简化，于是就设置两个变量，同时有一个判断变量进行变量的切换。于是就有了下面的代码。

// 定义两个参数变量，进行轮流计时。
        var countTime1;
        var countTime2;

        // 定义一个函数切换变量，用于进行参数切换。
        var judgement = true;、

		// 开始计时
        function beginCount(){
            if(judgement==true){
                countTime1 = setInterval(countTime,1000);
            }
            else if(judgement == false){
                countTime2 = setInterval(countTime,1000);
            }
        }

        // 暂停计时
        function stopCount(){
            if(judgement==true){
                var stop1 = clearInterval(countTime1);
                judgement = false;
            }
            else if(judgement==false){
                var stop2 = clearInterval(countTime2);
                judgement = true;
            }
        }