JS查找标签节点：秒表实现源码_标签节点的原码在哪-CSDN博客

本文链接：https://blog.csdn.net/hr226/article/details/106225080

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>秒表实现</title>
</head>

<body>
    <div id="div1">
        <div id="count">
            <span id="id_H">00</span>:
            <span id="id_M">00</span>:
            <span id="id_S">00</span>
        </div>
        <input id="start" type="button" value="开始">
        <input id="pause" type="button" value="暂停">
        <input id="stop" type="button" value="停止">
    </div>
    <script>
        // 可以将查找标签节点的操作进行简化
        function $(id) {
            return document.getElementById(id);
        }

        window.onload = function () {
            // 点击开始开始计数
            var count = 0; //开始计数以后，累加的总秒数
            var timer = null;
            // 开始
            $("start").onclick = function () {
                timer = setInterval(function () {
                    count++;
                    // 需要改变页面上时分秒的值
                    $("id_S").innerHTML = showNum(count % 60);
                    $("id_M").innerHTML = showNum(parseInt(count / 60) % 60);
                    $("id_H").innerHTML = showNum(parse(count / 3600));
                }, 1000)
            }
            // 暂停
            $("pause").onclick = function () {
                // 取消定时器
                clearInterval(timer);
            }
            // 停止  停止计数，数据清零：数据清零，页面展示数据清零
            $("stop").onclick = function () {
                // 取消定时器
                clearInterval(timer);
                // 数据清零  总秒数清零
                count = 0;
                // 页面展示数据清零
                $("id_S").innerHTML = "00";
                $("id_M").innerHTML = "00";
                $("id_H").innerHTML = "00";
            }
        }

        //处理单个数字
        function showNum(num) {
            if (num < 10) {
                return "0" + num;
            } else {
                return num;
            }
        }
    </script>
</body>

</html>