給wordpress網(wǎng)站添加2025新年倒計(jì)時(shí)顯示

使用GreenShift插件給網(wǎng)站添加新年倒計(jì)時(shí)

2025的農(nóng)歷新年就快到了，悅?cè)?span id="rknbvhn0mnp7" class="xintheme_keyword_link">wordpress建站給大家分享一下如何給網(wǎng)站添加倒計(jì)時(shí)模塊。其實(shí)前兩年我也分享過類似的教程，大家也可以去看看。如上面就是去年分享的，使用greenshift插件的倒計(jì)時(shí)模塊來制作，這個(gè)可以制作出更漂亮的倒計(jì)時(shí)效果。

<div id="countdown" style="font-size: 24px; text-align: center; margin-top: 20px;">  
    <h2 style="color: #CF2E2E;"> ?? 距離2025農(nóng)歷新年還有 ??</h2>  
    <div id="timer" style="color: #007CBA;">  ? 
        <span id="days"></span>天   
        <span id="hours"></span>小時(shí)   
        <span id="minutes"></span>分鐘   
        <span id="seconds"></span>秒
    </div>  
</div>  

<script>  
    // 設(shè)置目標(biāo)日期  
    const targetDate = new Date("January 29, 2025 00:00:00").getTime();  

    // 更新倒計(jì)時(shí)  
    const countdownFunction = setInterval(function() {  
        const now = new Date().getTime();  
        const distance = targetDate - now;  

        // 計(jì)算時(shí)間單位  
        const days = Math.floor(distance / (1000 * 60 * 60 * 24));  
        const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));  
        const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));  
        const seconds = Math.floor((distance % (1000 * 60)) / 1000);  

        // 顯示結(jié)果  
        document.getElementById("days").innerHTML = days;  
        document.getElementById("hours").innerHTML = hours;  
        document.getElementById("minutes").innerHTML = minutes;  
        document.getElementById("seconds").innerHTML = seconds;  

        // 如果倒計(jì)時(shí)結(jié)束  
        if (distance < 0) {  
            clearInterval(countdownFunction);  
            document.getElementById("timer").innerHTML = "祝您新年快樂！";  
        }  
    }, 1000);  
</script>

今天再給大家分享一個(gè)HTML代碼方式，更簡單一些，可能直接復(fù)制代碼使用。上面的文字提示可以自己修改，圖標(biāo)使用的是emoji表情，也可以自行修改。（emoji表情復(fù)制→http://www.wto86.com/yrwpemoji/）

代碼修改好后可以添加到任意位置，可以使用古騰堡或elementor的HTML模塊，把代碼粘貼進(jìn)去就可能了。也可以添加到網(wǎng)站的小工作中，在側(cè)邊欄顯示。

最終顯示效果參考上圖。

另外要注意一下，春節(jié)過后這個(gè)模塊最好把它刪掉哦。