html 实现一个简易的计时器 开始 暂停 复位

HTML实现一个简易的计时器可以使用JavaScript结合HTML元素来完成。

首先，在HTML中创建一个计时器区域，可以使用div元素，并给它一个id来方便后续用JavaScript操作。例如：

<div id="timer">00:00:00</div>

接下来，在HTML的body尾部引入JavaScript代码，在其中定义计时器的逻辑。例如：

<script>
    var timer; // 用于保存计时器对象
    var hours = 0;
    var minutes = 0;
    var seconds = 0;

    function formatTime(time) {
        // 格式化时间，将时间格式变为“00:00:00”的形式
        return time.toString().padStart(2, "0");
    }

    function start() {
        // 开始计时
        clearInterval(timer); // 确保只有一个计时器在运行
        timer = setInterval(function() {
            seconds++;
            if (seconds === 60) {
                minutes++;
                seconds = 0;
            }
            if (minutes === 60) {
                hours++;
                minutes = 0;
            }
            document.getElementById("timer").innerHTML = `${formatTime(hours)}:${formatTime(minutes)}:${formatTime(seconds)}`;
        }, 1000); // 每秒更新一次时间
    }

    function pause() {
        // 暂停计时
        clearInterval(timer);
    }

    function reset() {
        // 复位计时
        clearInterval(timer);
        hours = 0;
        minutes = 0;
        seconds = 0;
        document.getElementById("timer").innerHTML = "00:00:00";
    }
</script>

最后，在HTML中使用按钮来触发计时器的各个功能。例如：

<button onclick="start()">开始</button>
<button onclick="pause()">暂停</button>
<button onclick="reset()">复位</button>

这样，当点击对应的按钮时，就可以实现简易的计时器的开始、暂停和复位功能。