在文本行内加个倒计时（循环）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Next Day Delivery Countdown</title>
    <style>
        #countdowns {
            font-size: 14px !important;
            font-weight: 700 !important;
            color: #2a6f9f !important;
            line-height: 1 !important;
            margin-bottom: 0 !important;
            transition: color 0.3s ease;
        }

        .b {
            font-weight: 700;
        }

        .p {
            margin-bottom: 0;
            font-family: Montserrat;
            font-size: 14px;
            color: #333;
        }

        .urgent {
            color: #ff0000 !important;
            animation: pulse 1s infinite;
        }

        @keyframes pulse {
            0% { opacity: 1; }
            50% { opacity: 0.7; }
            100% { opacity: 1; }
        }
    </style>
</head>
<body>
    <p class="p"> (Your first-order promo ends at <span id="countdowns">06:23:04</span>.) </p>

    <script>
        // 初始化倒计时时间（6小时23分钟04秒）
        const INITIAL_TIME = 6 * 60 * 60 + 23 * 60 + 4; // 总秒数
        let timeLeft = INITIAL_TIME;
        let timerInterval;

        // 从本地存储加载保存的倒计时
        function loadCountdown() {
            const savedEnd = localStorage.getItem('countdownEnd');
            const savedStart = localStorage.getItem('countdownStart');

            if (savedEnd && savedStart) {
                const now = Date.now();
                const endTime = parseInt(savedEnd);
                const startTime = parseInt(savedStart);

                // 检查是否过期
                if (now >= endTime) {
                    // 如果过期，重置倒计时
                    resetCountdown();
                    return;
                }

                // 计算剩余时间
                timeLeft = Math.max(0, Math.floor((endTime - now) / 1000));

                // 如果剩余时间超过初始时间，重置
                if (timeLeft > INITIAL_TIME) {
                    resetCountdown();
                }
            } else {
                // 如果没有保存的数据，使用初始时间
                timeLeft = INITIAL_TIME;
            }
        }

        // 保存倒计时状态
        function saveCountdown() {
            const now = Date.now();
            const endTime = now + (timeLeft * 1000);
            localStorage.setItem('countdownEnd', endTime);
            localStorage.setItem('countdownStart', now);
        }

        // 重置倒计时
        function resetCountdown() {
            timeLeft = INITIAL_TIME;
            saveCountdown();
        }

        // 检查是否需要每日重置
        function checkDailyReset() {
            const now = new Date();
            const hours = now.getHours();
            const minutes = now.getMinutes();
            const seconds = now.getSeconds();

            // 在午夜重置（00:00:00）
            if (hours === 0 && minutes === 0 && seconds === 0) {
                resetCountdown();
            }
        }

        // 更新倒计时显示
        function updateCountdown() {
            // 检查每日重置
            checkDailyReset();

            // 计算小时、分钟、秒
            let hours = Math.floor(timeLeft / 3600);
            let minutes = Math.floor((timeLeft % 3600) / 60);
            let seconds = timeLeft % 60;

            const countdownElement = document.getElementById("countdowns");

            // 根据剩余时间改变显示样式
            if (timeLeft <= 0) {
                // 时间到
                clearInterval(timerInterval);
                countdownElement.innerHTML = "Time's up!";
                countdownElement.classList.add('urgent');
                resetCountdown(); // 自动重置

                // 1秒后重新开始倒计时
                setTimeout(() => {
                    timeLeft = INITIAL_TIME;
                    timerInterval = setInterval(updateCountdown, 1000);
                    updateCountdown();
                }, 1000);

                return;
            } else {
                countdownElement.classList.remove('urgent');
                countdownElement.style.fontWeight = '700';
                countdownElement.style.color = '#2a6f9f';

                // 显示小时、分钟和秒，用冒号分隔
                countdownElement.innerHTML =
                    hours.toString().padStart(2, '0') + ":" +
                    minutes.toString().padStart(2, '0') + ":" +
                    seconds.toString().padStart(2, '0');
            }

            // 减少剩余时间
            timeLeft--;

            // 每分钟保存一次状态
            if (timeLeft % 60 === 0) {
                saveCountdown();
            }
        }

        // 页面加载时初始化
        document.addEventListener('DOMContentLoaded', function () {
            // 加载保存的倒计时
            loadCountdown();

            // 保存初始状态
            saveCountdown();

            // 立即更新一次显示
            updateCountdown();

            // 每秒更新一次
            timerInterval = setInterval(updateCountdown, 1000);

            // 页面可见性改变时处理
            document.addEventListener('visibilitychange', function () {
                if (!document.hidden) {
                    // 页面重新可见时，重新加载倒计时
                    loadCountdown();
                    updateCountdown();
                }
            });

            // 页面卸载前保存状态
            window.addEventListener('beforeunload', saveCountdown);
        });
    </script>
</body>
</html>
posted @ 2026-02-28 18:53 还好阿卡阅读(19) 评论(0) 收藏举报
刷新页面返回顶部
qianqian

在文本行内加个倒计时（循环）
