使用GreenShift插件给网站添加新年倒计时
2025的农历新年就快到了,悦然wordpress建站给大家分享一下如何给网站添加新年倒计时模块。其实前两年我也分享过类似的教程,大家也可以去看看。如上面就是去年分享的,使用greenshift插件的倒计时模块来制作,这个可以制作出更漂亮的倒计时效果。
<div id="countdown" style="font-size: 24px; text-align: center; margin-top: 20px;"> <h2 style="color: #CF2E2E;"> 🎇 距离2025农历新年还有 🎆</h2> <div id="timer" style="color: #007CBA;"> ⏰ <span id="days"></span>天 <span id="hours"></span>小时 <span id="minutes"></span>分钟 <span id="seconds"></span>秒 </div> </div> <script> // 设置目标日期 const targetDate = new Date("January 29, 2025 00:00:00").getTime(); // 更新倒计时 const countdownFunction = setInterval(function() { const now = new Date().getTime(); const distance = targetDate - now; // 计算时间单位 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); // 显示结果 document.getElementById("days").innerHTML = days; document.getElementById("hours").innerHTML = hours; document.getElementById("minutes").innerHTML = minutes; document.getElementById("seconds").innerHTML = seconds; // 如果倒计时结束 if (distance < 0) { clearInterval(countdownFunction); document.getElementById("timer").innerHTML = "祝您新年快乐!"; } }, 1000); </script>
今天再给大家分享一个HTML代码方式,更简单一些,可能直接复制代码使用。上面的文字提示可以自己修改,图标使用的是emoji表情,也可以自行修改。(emoji表情复制→https://www.zsxxfx.com/yrwpemoji/)
代码修改好后可以添加到任意位置,可以使用古腾堡或elementor的HTML模块,把代码粘贴进去就可能了。也可以添加到网站的小工作中,在侧边栏显示。
最终显示效果参考上图。
另外要注意一下,春节过后这个模块最好把它删掉哦。
© Copyright 2020~2026. 悦然网络工作室/悦然wordpress建站 专注中小企业wordpress建站 All Rights Reserved.网站地图本站图片来源为Pexels、Pixabay、Freepik、Unsplash等图片库的免费许可,CC0协议;还有部分为自己手绘或AI生成,版权碰瓷请自重!法律服务:law@yueranseo.com蜀ICP备20016391号-1 川公网安备 51011502000367号