查看“Widget:Countdown”的源代码

<noinclude>{{#widget:countdown}}{{#Widget:CopyRedeemCode}}
</noinclude><includeonly>
<div id="countdown" class="row">
        <div class="countdown-title col-md-8">
                <div id="countdown-title-img"></div>
                <div class="countdown-description">Mark your calendars for the big day.<a href="#" target="_blank"
                                class="countdown-deslink"></a></div>
        </div>
  <div class="col-md-4">
        <div class="countdown-blocks "><a href="#" target="_blank" class="countdown-expiredlink"></a></div>
    <div><div>兑换码</div>
      <span class="copy-text" data-begin-date="2025-06-27T19:00:00" data-launch-date="2025-07-20T23:59:59">HAPPINESS</span>
<span class="copy-text" data-begin-date="2025-06-27T19:00:00" data-launch-date="2025-07-20T23:59:59">DEEPSPACE4</span>
<span class="copy-text" data-begin-date="2025-07-02T19:00:00" data-launch-date="2025-07-20T23:59:59">ZZZZZZ</span></div>
  </div>
</div>
<script>
const data = {
    "launchDate": `<!--{$date}-->`||"2025-07-02T19:00:00",
    "titleImg": `<!--{$titleImg}-->`|| "https://patchwiki.biligame.com/images/lysk/4/4e/3u61zgbzgu1y4e26fd6rpgc0zl12d75.png",
    "title": {
        "countdown": "",
        "expired": ""
    },
    "countdown_description": {
        "countdown": "夜梦轻语",
        "countdown_linkHref": "https://live.bilibili.com/31642946/?live_from=86001&spm_id_from=333.1387.0.0",
        "countdown_linkText": "#7月2日19:00 恋与深空官方直播间#",
        "expired": "晚安猎人小姐 准备好一起进入梦的领域了吗",
        "expired_linkHref": "https://live.bilibili.com/31642946/?live_from=86001&spm_id_from=333.1387.0.0",
        "expired_linkText": "#7月2日19:00 恋与深空官方直播间#"
    },
    "countdown_block": {
        "message": "",
        "linkHref": "https://live.bilibili.com/31642946/?live_from=86001&spm_id_from=333.1387.0.0",
        "linkText": "#7月2日19:00 恋与深空官方直播间#"
    }
};
// 
// 使用 data 中的 launchDate
const launchDate = new Date(data.launchDate);
const countdownElement = document.querySelector(".countdown-blocks");
const titleElement = document.querySelector(".countdown-title");
const descriptionElement = document.querySelector(".countdown-description");

// 创建title-img
const titleImgElement = document.querySelector("#countdown-title-img");
//用指定链接创建img
const img = document.createElement("img");
img.src = data.titleImg;
img.alt = "";
titleImgElement.appendChild(img);

// 创建时间块的函数
const createBlock = (label, value) => {
    const block = document.createElement("div");
    block.className = "time-block";

    const valueEl = document.createElement("div");
    valueEl.className = "time-value";
    // 为个位数添加前导零
    valueEl.textContent = value < 10 ? `0${value}` : value;

    const labelEl = document.createElement("div");
    labelEl.className = "time-label";
    labelEl.textContent = label;

    // 为秒数块添加脉冲动画
    if (label === "Seconds") {
        valueEl.style.animation = "pulse 1s infinite";
    }

    block.appendChild(valueEl);
    block.appendChild(labelEl);
    return block;
};

// 更新倒计时的函数
const updateCountdown = () => {
    const now = new Date();
    const difference = launchDate - now;

    if (difference > 0) {
        // 设置倒计时标题和描述
        if(data.title.countdown.length > 0){
            titleElement.textContent = data.title.countdown;
        }
        descriptionElement.innerHTML = `${data.countdown_description.countdown} <a href="${data.countdown_description.countdown_linkHref}" target="_blank">${data.countdown_description.countdown_linkText}</a>`;

        const timeLeft = {
            Days: Math.floor(difference / (1000 * 60 * 60 * 24)),
            Hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
            Minutes: Math.floor((difference / 1000 / 60) % 60),
            Seconds: Math.floor((difference / 1000) % 60)
        };

        countdownElement.innerHTML = "";
        for (const [label, value] of Object.entries(timeLeft)) {
            countdownElement.appendChild(createBlock(label, value));
        }
    } else {
        // 处理倒计时结束
        if(data.title.expired.length > 0){
            titleElement.textContent = data.title.expired;
        }
        descriptionElement.innerHTML = `${data.countdown_description.expired} <a href="${data.countdown_description.expired_linkHref}" target="_blank">${data.countdown_description.expired_linkText}</a>`;

        countdownElement.innerHTML = "";

        const messageBlock = document.createElement("div");
        messageBlock.className = "time-block expired-message";
        messageBlock.style.gridColumn = "1 / -1";
        messageBlock.style.padding = "2rem";
        messageBlock.textContent = data.countdown_block.message;

        const link = document.createElement("a");
        link.href = data.countdown_block.linkHref;
        link.target = "_blank";
        link.textContent = data.countdown_block.linkText;
        messageBlock.appendChild(link);

        countdownElement.appendChild(messageBlock);
        clearInterval(timer);
    }
};

// 初始化并设置定时器
updateCountdown();
const timer = setInterval(updateCountdown, 1000);
</script>
<style>
#countdown {
    margin: 0 auto;
    text-align: center;
    display: flex;
    justify-content: space-between;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.233), transparent);
    padding: 10px 0;
    border-bottom: 3px solid rgba(255, 255, 255, 0.281);
	margin-bottom:15px;
}

.countdown-title {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    color: #5d5d5d;
    font-weight: 700;
    /* 去掉 max-height 限制 */
}

.countdown-title img {
    display: block; /* 修改 display 属性 */
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
    width: auto;
    height: auto;
}

.countdown-description {
    font-size: 16px;
    color: #5d5d5d;
}

.countdown-blocks {
    margin: 10px auto;
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.time-block {
    flex: 1;
    min-width: 0;
    text-align: center;
    border-radius: 0.3rem;
    box-shadow: 0px -3px 1px 0px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    padding: 5px;
}

.time-block:hover {
    transform: translateY(-3px);
    box-shadow: 2px 3px 1px rgba(0, 0, 0, 0.1);
}

.time-value {
    font-size: 56px;
    font-weight: bold;
    color: #022622;    
}

.time-label {
    font-size: 13px;
    font-weight: 500;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: center;
}

/* Add animation for seconds changing */
@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}

/* 平板设备适配 */
@media screen and (max-width: 1024px) {
    .countdown-description {
        font-size: 14px;
    }

    .time-value {
        font-size: 45px;
    }

    .time-label {
        font-size: 14px;
    }
}

/* 移动端适配 */
@media screen and (max-width: 768px) {
    #countdown {
        flex-direction: column;
        gap: 10px;
    }

    .time-value {
        font-size: 30px;
    }

    .time-label {
        font-size: 12px;
    }
}

/* 小屏幕手机适配 */
@media screen and (max-width: 375px) {
    .time-value {
        font-size: 25px;
    }

    .time-label {
        font-size: 12px;
    }
}
</style>
</includeonly>