前两天，老郭在网上闲逛，发现“小世界博客”的一篇《给你的博客加个春节倒计时》教程蛮有意思的，于是就想着给老郭博客也弄起来。教程里面已经有现成的代码了，但是当老郭直接拿过来用的时候，却发现背景图片无法完整的显示出来，估计是和老郭使用的子比主题有些冲突。

没办法，只能求助于AI了，但是百度的文心一言竟然说这段代码含有攻击性，拒绝做出答复。好吧，只能问外国的AI了。

经过多次的修改，AI总算给出了较为满意的代码，完美的适配子比主题。老郭用WPCode插件把代码放在了侧边栏里，效果如下。

代码包含了春节倒计时和高考倒计时，有需求的可以自行修改或删减。另外背景图片建议下载到本地使用，毕竟老郭博客也不知道能存在多久。

// 设置时区
date_default_timezone_set("Asia/Shanghai");

// 设置春节的日期
$endTimeSpring = new DateTime('2025-01-29 00:00:00');
$nowTime = new DateTime();

// 计算剩余时间
$intervalSpring = $nowTime->diff($endTimeSpring);

// 获取差异（天、小时、分钟、秒）
$dSpring = $intervalSpring->days; // 春节总天数
$hSpring = $intervalSpring->h;    // 小时
$mSpring = $intervalSpring->i;    // 分钟
$sSpring = $intervalSpring->s;    // 秒

// 设置高考的日期
$endTimeExam = new DateTime('2025-06-07 09:00:00');
$intervalExam = $nowTime->diff($endTimeExam);

// 获取差异（天、小时、分钟、秒）
$dExam = $intervalExam->days; // 高考总天数
$hExam = $intervalExam->h;    // 小时
$mExam = $intervalExam->i;    // 分钟
$sExam = $intervalExam->s;    // 秒
?>

<div style="background:#fff; padding: 0 0.5rem; position: relative; text-align: center;">
    <img src="https://lgbk.cn/wp-content/uploads/2024/11/bg1.webp" 
         alt="春节背景" 
         style="width: 100%; height: auto; border-radius: 10px;">
    <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fcf8b1; text-shadow: 2px 2px 10px #b2b2b2; display: flex; flex-direction: column; align-items: center; padding: 0 1rem;">
        <h1 style="font-size: 2rem; margin: 0; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2;">
            2025年春节倒计时
        </h1>
        <div id="setTimeSpring" style="font-size: 1.6rem; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
            <?php echo "{$dSpring} 天 {$hSpring} 时 {$mSpring} 分 {$sSpring} 秒"; ?>
        </div>
    </div>
</div>

<div style="background:#fff; padding: 0 0.5rem; position: relative; text-align: center; margin-top: 2rem;">
    <img src="https://lgbk.cn/wp-content/uploads/2024/11/bg2.webp" 
         alt="高考背景" 
         style="width: 100%; height: auto; border-radius: 10px;">
    <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fcf8b1; text-shadow: 2px 2px 10px #b2b2b2; display: flex; flex-direction: column; align-items: center; padding: 0 1rem;">
        <h1 style="font-size: 2rem; margin: 0; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2;">
            2025年高考倒计时
        </h1>
        <div id="setTimeExam" style="font-size: 1.6rem; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
            <?php echo "{$dExam} 天 {$hExam} 时 {$mExam} 分 {$sExam} 秒"; ?>
        </div>
    </div>
</div>

<script type="text/javascript">
    // 春节倒计时更新
    function updateCountdownSpring() {
        var countdownElement = document.getElementById("setTimeSpring");
        var endTimeSpring = new Date('2025/01/29 00:00:00').getTime();
        var nowTime = new Date().getTime();
        var t = endTimeSpring - nowTime;

        // 计算剩余时间
        var d = Math.floor(t / (1000 * 60 * 60 * 24));
        var h = Math.floor((t % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        var m = Math.floor((t % (1000 * 60 * 60)) / (1000 * 60));
        var s = Math.floor((t % (1000 * 60)) / 1000);

        // 更新显示
        countdownElement.innerHTML = d + ' 天 ' + h + ' 时 ' + m + ' 分 ' + s + ' 秒 ';

        // 如果时间到，停止更新
        if (t < 0) {
            clearInterval(intervalSpring);
            countdownElement.innerHTML = "春节快乐！";
        }
    }

    // 高考倒计时更新
    function updateCountdownExam() {
        var countdownElement = document.getElementById("setTimeExam");
        var endTimeExam = new Date('2025/06/07 09:00:00').getTime();
        var nowTime = new Date().getTime();
        var t = endTimeExam - nowTime;

        // 计算剩余时间
        var d = Math.floor(t / (1000 * 60 * 60 * 24));
        var h = Math.floor((t % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        var m = Math.floor((t % (1000 * 60 * 60)) / (1000 * 60));
        var s = Math.floor((t % (1000 * 60)) / 1000);

        // 更新显示
        countdownElement.innerHTML = d + ' 天 ' + h + ' 时 ' + m + ' 分 ' + s + ' 秒 ';

        // 如果时间到，停止更新
        if (t < 0) {
            clearInterval(intervalExam);
            countdownElement.innerHTML = "高考加油！";
        }
    }

    // 每秒更新倒计时
    var intervalSpring = setInterval(updateCountdownSpring, 1000);
    var intervalExam = setInterval(updateCountdownExam, 1000);
</script>