通过自定义HTML小工具为wordpress添加倒计时模块

为 wordpress 添加一个倒计时模块，可以在网站有重大事件、新产品即将发布或逢新春佳节等重要节日的时候用来提醒用户知晓。

我们可以通过在 wordpress 的“自定义HTML”小工具中添加一段纯HTML代码，将倒计时模块部署到 wordpress 侧边栏的合适位置。具体方法如下：

进入 wordpress 后台，依次展开“外观”—“小工具”，找到“自定义HTML”小工具，将其拖动到侧边栏合适位置，添加如下代码到“自定义HTML”小工具中，并保存。

有两段倒计时代码可供选择：

代码一：

<div class="gn_box">
<h1><center><font color=#E80017>2</font><font color=#D1002E>0</font><font color=#BA0045>2</font><font color=#A3005C>0</font><font color=#8C0073>年</font><font color=#75008A>-</font><font color=#5E00A1>端</font><font color=#4700B8>午</font><font color=#4700B8>节</font><font color=#3000CF>倒</font><font color=#1900E6>计</font><font color=#0200FD>时</font></center></h1>
<center>
<div id="CountMsg" class="HotDate">
<span id="t_d">0 天</span>
<span id="t_h">0 时</span>
<span id="t_m">0 分</span>
<span id="t_s">0 秒</span>
</div>
</center>
<script type="text/javascript"> function getRTime() {
var EndTime = new Date('2020/06/25 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>

更改代码第2行中的标题“2020-端午节倒计时”和第12行中的日期“2020/06/25”为您自己的要求。

最终效果图：

html实现wordpress倒计时

代码二：

<style type="text/css">
.zzsc-content{
padding-left:10%;
}
#clock{
font-family: 'Days One',"Microsoft YaHei", Arial,sans-serif;
font-size: 2em;
}
</style>
<div class="zzsc-content bgcolor-8">
<span id="clock"></span>
</div>
<script type="text/javascript" src="http://feed.gearhostpreview.com/js/jquery.countdown.js"></script>
<script type="text/javascript">
$(function(){
$('#clock').countdown('2020/6/25', function(event) {
$(this).html(event.strftime('%D 天 %H:%M:%S'));
});
})
</script>

1、更改代码第17行中的日期“2020/6/25”为您自己的要求。

2、此为调用JS方式，请下载实现倒计时的JS文件并上传到您自己的网站中，然后更改代码第14行中的JS调用地址。

倒计时JS文件下载地址：

https://github.com/hilios/jQuery.countdown/releases/download/2.2.0/jquery.countdown-2.2.0.zip

最终效果图：

js调用实现wordpress倒计时

以上两段代码实现的倒计时效果大同小异，其中的CSS样式可自行优化。由于采用的是纯HTML代码，理论上任何网站都可添加使用，具体效果请自测。

评论列表