当前位置：首页 > news >正文

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

news 2026/3/27 13:42:03

<!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>