现在的位置: 首页 > WP 专题 > 正文

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

2020年04月02日 WP 专题 ⁄ 共 2339字 ⁄ 字号 暂无评论 ⁄ 阅读 440 次

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

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

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

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

代码一:

  1. <div class="gn_box">
  2.     <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>
  3.     <center>
  4.         <div id="CountMsg" class="HotDate">
  5.             <span id="t_d">0 天</span>
  6.             <span id="t_h">0 时</span>
  7.             <span id="t_m">0 分</span>
  8.             <span id="t_s">0 秒</span>
  9.         </div>
  10.     </center>
  11.     <script type="text/javascript"> function getRTime() {
  12.         var EndTime = new Date('2020/06/25 00:00:00');
  13.         var NowTime = new Date();
  14.         var t = EndTime.getTime() - NowTime.getTime();
  15.         var d = Math.floor(t / 1000 / 60 / 60 / 24);
  16.         var h = Math.floor(t / 1000 / 60 / 60 % 24);
  17.         var m = Math.floor(t / 1000 / 60 % 60);
  18.         var s = Math.floor(t / 1000 % 60);
  19.         document.getElementById("t_d").innerHTML = d + " 天";
  20.         document.getElementById("t_h").innerHTML = h + " 时";
  21.         document.getElementById("t_m").innerHTML = m + " 分";
  22.         document.getElementById("t_s").innerHTML = s + " 秒";
  23.     }
  24.     setInterval(getRTime, 1000);
  25.     </script>
  26. </div>

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

最终效果图:

html实现wordpress倒计时

代码二:

  1. <style type="text/css">
  2. .zzsc-content{
  3. padding-left:10%;
  4. }
  5. #clock{
  6. font-family: 'Days One',"Microsoft YaHei"Arial,sans-serif;
  7. font-size: 2em;
  8. }
  9. </style>
  10. <div class="zzsc-content bgcolor-8">
  11. <span id="clock"></span>
  12. </div>
  13. <script type="text/javascript" src="http://feed.gearhostpreview.com/js/jquery.countdown.js"></script>
  14. <script type="text/javascript">
  15. $(function(){
  16. $('#clock').countdown('2020/6/25', function(event) {
  17. $(this).html(event.strftime('%D 天 %H:%M:%S'));
  18. });
  19. })
  20. </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代码,理论上任何网站都可添加使用,具体效果请自测。

给我留言

留言无头像?


×