新年期间，无论是春节还是元宵佳节，倒计时都成为了增添节日氛围的一大亮点。在网页上添加一个倒计时功能，不仅能为访客带来期待感，还能为网站的重要活动、通知或商品折扣等提供醒目的提醒。然而，使用插件来实现这一功能往往显得繁琐，且可能不符合网站的整体风格。
今天，为大家带来一个简洁方便的代码教程，帮助你轻松在网站上添加倒计时功能。这个倒计时不仅多端自适应，能在各种设备上完美展示，而且代码简洁、易于定制，非常适合用于各种场景，如节日倒计时、网站活动通知、限时商品折扣等。
效果图
代码
代码语言：javascript复制//WordPress倒计时功能
//www.anlu1314.com修改
<div class="card" style="width: 100%; background: url(https://tcbmcg.top/img/20240225/1000053815.jpg) no-repeat; background-size: cover;"><br>
<center><b> <h4><p><span style="color: #ffffff;">2024年-元宵倒计时</span></p></h4></b></center>
<div class="gn_box">
<center>
<div id="CountMsg" class="HotDate text-light" style="width: 100%; display: flex; justify-content: center;">
<span style="color: #ffffff;"><span id="t_d">9 天</span>
<span id="t_h">9 时</span>
<span id="t_m">9 分</span>
<span id="t_s">9 秒</span></span>
</div><br>
</center><br>
<script type="text/javascript"> function getRTime() {
var EndTime = new Date('2024/02/24 00:00:00');
var NowTime = new Date();
var t = EndTime.getTime() - NowTime.getTime();
var d = Math.floor(t / 1000 / 60 / 60 / 24);
var h = Math.floor(t / 1000 / 60 / 60 % 24);
var m = Math.floor(t / 1000 / 60 % 60);
var s = Math.floor(t / 1000 % 60);
document.getElementById("t_d").innerHTML = d " 天";
document.getElementById("t_h").innerHTML = h " 时";
document.getElementById("t_m").innerHTML = m " 分";
document.getElementById("t_s").innerHTML = s " 秒";
}
setInterval(getRTime, 1000);
</script>
</div>
</div><style>
.copyright {
margin-top: 10px;
padding: 10px;
background: #5f9ea0;
border-radius: 5px;
color : #f0ffff;
}
.copyright .copyright-title {
padding: 5px;
text-align: center;
}
.copyright .copyright-title h3 {
font-size: 18px;
}
.copyright .copyright-text {
font-size: 15px;
line-height: 25px;
}
.copyright .copyright-url {
margin: 5px 0;
}
</style>
//WordPress倒计时功能
//www.anlu1314.com修改代码修改
一般放在文章内页，如果你主题自带代码位置，放到文章顶部即可，如果没有代码位置找到你主题的文章页面文件（如post.php，不同主题文件不一样），在合适的位置（推荐文章顶部）插入即可。
提示
数据无价，请提前备份，建议建立一个文件修改记录，以便后期查阅自己修改了哪些内容
修改完毕后，刷新一下浏览器缓存，再次访问网站，即可看到修改后的效果
