标签倒计时下的文章 - 老郭博客

登录

找到 1 篇与倒计时相关的结果

2024-11-17
给博客加上重要日子倒计时前两天，老郭在网上闲逛，发现“小世界博客”的一篇《给你的博客加个春节倒计时》教程蛮有意思的，于是就想着给老郭博客也弄起来。教程里面已经有现成的代码了，但是当老郭直接拿过来用的时候，却发现背景图片无法完整的显示出来，估计是和老郭使用的子比主题有些冲突。没办法，只能求助于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://gwi.cc/usr/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://gwi.cc/usr/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>

网络 # 代码 # 倒计时

老郭 1年前
0 0 0