如何通过JavaScript获取id为countdowndate的文本并生成Date对象

核心逻辑是通过DOM获取countdowndate元素的文本内容，替换掉硬编码的日期字符串。同时考虑到元素内容会动态更新，确保倒计时能同步刷新。

完整代码示例 #

<!DOCTYPE html>
<html>
<head>
    <title>动态倒计时器</title>
    <style>
        .countdown {
            font-size: 24px;
            font-weight: bold;
            margin: 20px;
        }
    </style>
</head>
<body>
    <!-- 内容会被动态更新的目标元素 -->
    <p id="countdowndate">2023/10/26 4:00 PM</p>
    <div class="countdown" id="countdown"></div>

    <script>
        function updateCountdown() {
            // 获取元素文本并去除前后空白
            const targetDateText = document.getElementById('countdowndate').textContent.trim();
            // 用获取到的文本创建日期对象
            const end = new Date(targetDateText);

            // 计算时间差
            const now = new Date();
            const diff = end - now;

            // 处理倒计时结束的情况
            if (diff <= 0) {
                document.getElementById('countdown').textContent = "倒计时已结束";
                return;
            }

            // 转换为天、时、分、秒格式
            const days = Math.floor(diff / (1000 * 60 * 60 * 24));
            const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
            const seconds = Math.floor((diff % (1000 * 60)) / 1000);

            // 更新显示内容
            document.getElementById('countdown').textContent = 
                `${days}天 ${hours}时 ${minutes}分 ${seconds}秒`;
        }

        // 初始化执行一次
        updateCountdown();
        // 每秒刷新倒计时
        setInterval(updateCountdown, 1000);

        // 可选：监听元素内容变化，实时刷新倒计时
        const observer = new MutationObserver(() => {
            updateCountdown();
        });
        observer.observe(document.getElementById('countdowndate'), {
            childList: true,
            subtree: true,
            characterData: true
        });
    </script>
</body>
</html>

关键细节 #

• 每次执行updateCountdown都会重新读取countdowndate的内容，确保元素更新后倒计时能同步切换到新日期。
• 加入MutationObserver可以在元素内容被动态修改时立刻触发刷新，不用等下一秒的定时器周期。
• 注意：countdowndate里的日期格式要保证浏览器能识别（比如MM/DD/YYYY hh:mm A、YYYY-MM-DD HH:mm:ss），如果格式特殊，需要自行添加日期解析逻辑转换为标准格式。

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