如何获取可循环轮播显示12小时制时间、星期、日期的HTML代码？

以下是完整可直接运行的HTML代码，默认每3秒切换一次展示内容，按「12小时制时间 → 中文星期 → 公历日期」的顺序无限循环：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>时间信息循环展示</title>
    <style>
        /* 可自行修改样式调整显示效果 */
        .display-box {
            font-size: 48px;
            font-weight: bold;
            text-align: center;
            margin-top: 100px;
            color: #333;
        }
    </style>
</head>
<body>
    <div class="display-box" id="showContent"></div>

    <script>
        // 切换间隔，单位为毫秒，3000即3秒，可按需修改
        const SWITCH_DELAY = 3000;
        const showElement = document.getElementById('showContent');
        // 当前展示内容的索引：0=时间 1=星期 2=日期
        let currentIndex = 0;
        const weekList = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];

        // 获取12小时制时间
        function get12HourTime() {
            const now = new Date();
            let hours = now.getHours();
            const period = hours < 12 ? 'AM' : 'PM';
            hours = hours % 12 || 12;
            const minutes = String(now.getMinutes()).padStart(2, '0');
            const seconds = String(now.getSeconds()).padStart(2, '0');
            return `${hours}:${minutes}:${seconds} ${period}`;
        }

        // 获取中文星期
        function getWeekDay() {
            const now = new Date();
            return weekList[now.getDay()];
        }

        // 获取日期字符串
        function getDateStr() {
            const now = new Date();
            const year = now.getFullYear();
            const month = String(now.getMonth() + 1).padStart(2, '0');
            const day = String(now.getDate()).padStart(2, '0');
            return `${year}年${month}月${day}日`;
        }

        // 更新展示内容
        function updateContent() {
            switch(currentIndex) {
                case 0:
                    showElement.innerText = get12HourTime();
                    break;
                case 1:
                    showElement.innerText = getWeekDay();
                    break;
                case 2:
                    showElement.innerText = getDateStr();
                    break;
            }
            // 索引循环
            currentIndex = (currentIndex + 1) % 3;
        }

        // 初始化+定时循环
        updateContent();
        setInterval(updateContent, SWITCH_DELAY);
    </script>
</body>
</html>

可调整配置说明 #

• 修改SWITCH_DELAY的数值即可调整切换间隔，单位为毫秒
• 调整<style>标签内的CSS规则可以修改显示的字体大小、颜色、位置等效果
• 修改weekList数组内的字符串可以自定义星期的展示文本，比如换成「星期六」「星期日」等格式

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