请求优化HTML/JS代码，实现秒转时分秒并持续计时及AM/PM显示功能

以下是满足所有需求的纯HTML、CSS、JavaScript实现代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>秒数转时钟</title>
    <style>
        .clock {
            display: inline-flex;
            align-items: center;
            font-size: 2rem;
            font-family: monospace;
            margin: 1rem 0;
        }
        .clock > div {
            margin-right: 0.2rem;
        }
        .ampm {
            font-size: 1.2rem;
            margin-left: 0.5rem;
            color: #666;
        }
        .Input {
            margin: 1rem 0;
        }
        #input {
            padding: 0.5rem;
            width: 200px;
        }
        #Container button {
            padding: 0.5rem 1rem;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="clock">
        <div id="hr">00:</div>
        <div id="mn">00:</div>
        <div id="ss">00</div>
        <div class="ampm">
            <div id="ap">AM</div>
        </div>
    </div>

    <div class="Input">
        <input type="number" min="0" max="86400" id="input" placeholder="输入0-86400之间的秒数">
    </div>

    <div id="Container">
        <button type="button" onclick="startClock()">提交</button>
    </div>

    <script>
        let totalSeconds = 0;
        let timer = null;

        // 格式化数字为两位，不足补0
        function formatTwoDigits(num) {
            return num.toString().padStart(2, '0');
        }

        // 更新时钟显示
        function updateClock() {
            const seconds = totalSeconds % 60;
            const minutes = Math.floor((totalSeconds / 60) % 60);
            let hours = Math.floor(totalSeconds / 3600);
            let period = 'AM';

            // 处理12小时制与AM/PM转换
            if (hours >= 12) {
                period = 'PM';
                hours = hours % 12 || 12; // 12/24点转为12，0点转为12
            } else if (hours === 0) {
                hours = 12;
            }

            // 更新DOM内容
            document.getElementById("hr").textContent = `${formatTwoDigits(hours)}:`;
            document.getElementById("mn").textContent = `${formatTwoDigits(minutes)}:`;
            document.getElementById("ss").textContent = formatTwoDigits(seconds);
            document.getElementById("ap").textContent = period;
        }

        // 启动时钟逻辑
        function startClock() {
            const inputSec = parseInt(document.getElementById("input").value);
            // 输入验证
            if (isNaN(inputSec) || inputSec < 0 || inputSec > 86400) {
                alert("请输入0到86400之间的有效秒数");
                return;
            }

            // 清除旧定时器，避免重复触发
            if (timer) clearInterval(timer);

            totalSeconds = inputSec;
            updateClock();
            // 每秒递增并更新显示
            timer = setInterval(() => {
                totalSeconds++;
                // 超过一天后重置为0
                if (totalSeconds >= 86400) totalSeconds = 0;
                updateClock();
            }, 1000);
        }

        // 页面加载时初始化默认显示
        window.onload = updateClock;
    </script>
</body>
</html>

需求对应实现细节 #

• 输入范围限制：给input标签设置max="86400"属性，同时在JS中添加输入合法性校验，不符合范围则弹出提示。
• HH:ii:SS格式：通过formatTwoDigits函数用padStart方法确保所有时间数字均为两位，统一显示格式。
• AM/PM标识：根据小时数判断时段，处理12/24点的特殊转换逻辑，保证12小时制显示正确。
• 自动递增功能：使用setInterval每秒累加总秒数并更新显示，启动前清除旧定时器避免冲突；超过一天时长自动重置为0。
• 默认显示：页面加载时调用updateClock，初始总秒数为0，自动显示00:00:00 AM。
• 纯代码实现：所有效果均通过原生HTML、CSS、JS完成，未使用任何图片或视频资源。

内容的提问来源于stack exchange，提问作者Abhinand