JavaScript实现带有开始、暂停、复位的秒表

2023年1月17日10:56:29
<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            #showTime {
                width: 300px;
                height: 60px;
                font-size: 60px;
                line-height: 60px;
            }
        </style>
    </head>

    <body>
        <div>
            <div id="showTime">00:00:00</div>
            <button id="startBn">启动</button>
            <button id="restBn">复位</button>
        </div>
        <script>
            //——————
            var time, showTime, startBn, restBn, pauseDate;
            //布尔开关
            var bool = false;
            //暂停的累计时间
            var pauseTime = 0;

            init();
            function init() {
                showTime = document.getElementById("showTime");
                startBn = document.getElementById("startBn");
                restBn = document.getElementById("restBn");
                startBn.addEventListener("click", clickHandler);//开始按钮 ~ 暂停按钮
                restBn.addEventListener("click", clickHandler);//复位按钮
                setInterval(animation, 16);
            }

            //转化时间函数
            function animation() {
                if (!bool) return;
                //前时间减去上次开启时间减去暂停累计时间
                var times = new Date().getTime() - time - pauseTime;
                var minutes = Math.floor(times / 60000);//毫秒转化为分钟
                var seconds = Math.floor((times - minutes * 60000) / 1000);//已知分钟 
                //  将time减去分钟 除去1000得出 秒
                var ms = Math.floor((times - minutes * 60000 - seconds * 1000) / 10);//
                showTime.innerHTML =
                    (minutes < 10 ? "0" + minutes : minutes) + ":"
                    + (seconds < 10 ? "0" + seconds : seconds) + ":"
                    + (ms < 10 ? "0" + ms : ms);
            }

            //点击时的事件
            function clickHandler(e) {
                e = e || window.event;
                if (this === startBn) {
                    bool = !bool;
                    if (bool) {
                        this.innerHTML = "暂停";
                        //如果我们上一次暂停时间是空，表示没有暂停过，因此，直接返回0
                        //如果上次的暂停时间是有值得，用当前毫秒数减去上次的毫秒数，这样就会得到暂停时间
                        pauseTime += (!pauseDate ? 0 : new Date().getTime() - pauseDate);
                        if (time) return;
                        time = new Date().getTime();
                        return;//是为bool判断跳出
                    }

                    this.innerHTML = "启动";
                    pauseDate = new Date().getTime();
                    return;//是为this是否等于startBn判断跳出
                }
                startBn.innerHTML = "启动";
                pauseTime = 0;
                pauseDate = null;
                bool = false;
                time = 0;
                showTime.innerHTML = "00:00:00";
            }

        </script>
    </body>

</html>

  • 作者：Coder小何
  • 原文链接：https://blog.csdn.net/qq_43377853/article/details/107821398
    更新时间：2023年1月17日10:56:29 ，共 1565 字。