HTML 页面计时器示例 - 代码和教程 - 常规

<!DOCTYPE html>
<html>
<head>
    <title>HTML 页面计时器</title>
    <script>
        // 定义计时器变量
        var timer;
<pre><code>    // 开始计时
    function startTimer() {
        // 获取显示时间的元素
        var display = document.getElementById(&quot;display&quot;);

        // 获取输入的时间
        var minutes = parseInt(document.getElementById(&quot;minutes&quot;).value);
        var seconds = parseInt(document.getElementById(&quot;seconds&quot;).value);

        // 将时间转换成秒数
        var totalSeconds = minutes * 60 + seconds;

        // 更新显示时间的元素
        display.innerHTML = formatTime(totalSeconds);

        // 设置计时器，每秒更新时间
        timer = setInterval(function() {
            // 减少剩余秒数
            totalSeconds--;

            // 更新显示时间的元素
            display.innerHTML = formatTime(totalSeconds);

            // 如果剩余时间为0，停止计时器
            if (totalSeconds &lt;= 0) {
                clearInterval(timer);
            }
        }, 1000);
    }

    // 停止计时
    function stopTimer() {
        clearInterval(timer);
    }

    // 格式化时间为&quot;分:秒&quot;的格式
    function formatTime(totalSeconds) {
        var minutes = Math.floor(totalSeconds / 60);
        var seconds = totalSeconds % 60;

        // 添加前导零
        minutes = minutes &lt; 10 ? &quot;0&quot; + minutes : minutes;
        seconds = seconds &lt; 10 ? &quot;0&quot; + seconds : seconds;

        return minutes + &quot;:&quot; + seconds;
    }
&lt;/script&gt;
</code></pre>
</head>
<body>
    <h1>HTML 页面计时器</h1>
    <label for="minutes">分钟数：</label>
    <input type="number" id="minutes" min="0" max="59" value="0">
    <br>
    <label for="seconds">秒数：</label>
    <input type="number" id="seconds" min="0" max="59" value="0">
    <br>
    <button onclick="startTimer()">开始</button>
    <button onclick="stopTimer()">停止</button>
    <br>
    <h2 id="display">00:00</h2>
</body>
</html>
<p>这个示例代码包含了一个输入框用于输入分钟数和秒数，以及一个开始按钮和停止按钮。在点击开始按钮后，计时器会开始倒计时，并在页面上显示剩余时间。在点击停止按钮后，计时器会停止。</p>