超级简单的原生JS秒表，JavaScript 开始重置暂停记录

本文链接：https://blog.csdn.net/weixin_59719549/article/details/121250012

在这里插入图片描述

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
            display: flex;
            font-size: 30px;
        }

        #reOOrd,
        .span {
            display: block;
        }
    </style>
</head>

<body>
    <div id="box">
        <span id="hour">00</span>:
        <span id="minute">00</span>:
        <span id="second">00</span>:
        <span id="millisecond">000</span>
    </div>


    <button id="begin">开始</button>
    <button id="reset">重置</button>
    <button id="record">记录</button>
    <div id="reOOrd"></div>

    <script>
        var box = document.getElementById('box'); // 大框
        var begin = document.getElementById('begin'); // 开始
        var reset = document.getElementById('reset'); // 重置
        var record = document.getElementById('record'); // 记录
        var hour = document.getElementById('hour'); // 小时
        var minute = document.getElementById('minute'); // 分钟
        var second = document.getElementById('second'); // 秒
        var millisecond = document.getElementById('millisecond'); // 毫秒
        var reOOrd = document.getElementById('reOOrd'); // 记录内容



        // 毫秒
        millisecond = 000;
        // 秒
        second = 00;
        // 分钟
        minute = 00;
        // 小时
        hour = 00;

        var num = 0;
        function zaro(num) { // 补 0 操作 让数字显示 01 而不是 1 好看一些
            if (num < 10) {
                return '0' + num
            }
            return num
        }
        //  开始
        begin.onclick = function () {
            begin.innerText = '暂停'; // 按钮切换为暂停 
            timer(); // 调用函数

        };

        var saabegin = '';

        var flag = false; // 设置一个布尔值 Boolean

        function timer() {
            if (!flag) { // 判断为 true的时候执行
                saabegin = setInterval(() => {
                    flag = true
                    millisecond += 17; // 毫秒一帧执行的时间
                    if (millisecond >= 1000) { // 当毫秒为1000的时候 
                        millisecond = 0; // 毫秒为0
                        second++; // 秒 ++ 开始执行
                    } else if (second >= 59) { // 当秒为59的时候
                        minute++; // 分钟 ++ 开始执行
                        second = 0; // 秒为0
                    } else if (minute >= 59) { // 当分钟为59的时候
                        hour++; // 小时++ 开始执行
                        minute = 0; // 分钟为0

                    } else if (hour >= 23.59) { // 当小时为0点的时候全部为0 从0开始
                        millisecond = 000;
                        second = 00;
                        minute = 00;
                        hour = 00;

                    }
                    // zaro(hour) ,zaro(minute) zaro(second) zaro(millisecond) 补0操作
                    box.innerHTML = `
            <span id="hour">${zaro(hour)}</span>:
            <span id="minute">${zaro(minute)}</span>:
            <span id="second">${zaro(second)}</span>:
            <span id="millisecond">${zaro(millisecond)}</span>
            
            `
                }, 17);
            } else {
                flag = false; // 当布尔值为fasle的时候
                begin.innerText = '开始'; // 按钮文本为 开始
                clearInterval(saabegin); //  解除计时器

            }
        }


        // 重置
        reset.onclick = function () {

            reOOrd.innerHTML = ''; // 内容全部为空

            clearInterval(saabegin);  //  解除计时器

            // 时间全部为零
            millisecond = 000;
            second = 00;
            minute = 00;
            hour = 00;
            // 内容全部为零
            box.innerHTML = `
            <span id="hour">00</span>:
            <span id="minute">00</span>:
            <span id="second">00</span>:
            <span id="millisecond">000</span>
            `
        }
        // 记录时间输出到reOOrd页面上
        record.onclick = function () {
            reOOrd.innerHTML += `
            <span id="hour">${zaro(hour)}</span>:
            <span id="minute">${zaro(minute)}</span>:
            <span id="second">${zaro(second)}</span>:
            <span id="millisecond">${zaro(millisecond)}</span><br>
            
            
            `
        }



    </script>
</body>

</html>