WordPress添加相关信息倒计时展示功能

1、编辑页面或文章时,切换到文本模式, 按以下格式编辑内容:

  1. <div class=“all”><!–all–>
  2. ******这是第一行的信息说明,用的时候删除这句话!******
  3.         <div class=“name”>名称</div>
  4.         <div class=“moneys”>金额(元)</div>
  5.         <div class=“times”>期限(年)</div>
  6.         <div class=“rests”>剩余(天)</div>
  7.     </div>
  8. ******这是第一个想要展示的信息倒计时开始,用的时候删除这句话!******
  9.     <div class=“all”><!–all–>
  10.         <div class=“name”><a href=“http://www.macrr.com/” target=“_blank” title=“阿里云”>阿里云主机</a></div>
  11.         <div class=“money”><code><span>100.00元</span></code></div>
  12.         <div class=“time”><code><span>2</span></code></div>
  13.         <div class=“rest”>
  14.             <code style=“color:#1ecd97” id=“t_d1”></code><code style=“color:#1ecd97” id=“t_h1”></code><code style=“color:#1ecd97” id=“t_m1”></code><code style=“color:#1ecd97” id=“t_s1”></code>
  15.         </div>
  16.     </div>
  17. ******这是第一个想要展示的信息倒计时结束,用的时候删除这句话!******
  18. ******这是第二个想要展示的信息倒计时,用的时候删除这句话!******
  19. <div class=“all”><!–all–>
  20.         <div class=“name”><a href=“http://www.macrr.com/” target=“_blank” title=“阿里云”>阿里云主机</a></div>
  21.         <div class=“money”><code><span>100.00元</span></code></div>
  22.         <div class=“time”><code><span>1</span></code></div>
  23.         <div class=“rest”>
  24.             <code style=“color:#1ecd97” id=“t_d2”></code><code style=“color:#1ecd97” id=“t_h2”></code><code style=“color:#1ecd97” id=“t_m2”></code><code style=“color:#1ecd97” id=“t_s2”></code>
  25.         </div>
  26.     </div>
  27. ******这是第二个想要展示的信息倒计时结束,用的时候删除这句话!******
第一行的信息说明只需要编辑一次就可以了,如果你只展示一类的话。后面开始每一个信息倒计时其实都是重复的,增加信息倒计时只需要复制这个黏贴到后面就可以了。有几个需要注意的地方如下:(以下代码只是说明,无需添加)
  1. <code style=“color:#1ecd97” id=“t_d1”></code>
  2. <code style=“color:#1ecd97” id=“t_h1”></code>
  3. <code style=“color:#1ecd97” id=“t_m1”></code>
  4. <code style=“color:#1ecd97” id=“t_s1”></code>

        这里可以看到有t_d1、t_h1、t_m1和t_s1,对应的是第一个信息的计时天、时、分、秒,之后第二个倒计时信息也会出现同样的,不过需要改成t_d2、t_h2、t_m2和t_s2,第三个以此类推修改。代码里的链接也需要自行修改哦。

2、js代码的相关修改,根据自己添加的信息多少修改下面这段代码后,保存调用。

  1. ******对应第一个展示的信息倒计时的开始,用的时候删除这句话!******
  2. function GetRTime1(){/*阿里云剩余时间*/
  3.   var EndTime1= new Date(‘2017/12/03 15:25:46’);
  4.   var NowTime1 = new Date();
  5.   var t1 =EndTime1.getTime() – NowTime1.getTime();
  6.   var d1=0;
  7.   var h1=0;
  8.   var m1=0;
  9.   var s1=0;
  10.   if(t1>=0){
  11.     d1=Math.floor(t1/1000/60/60/24);
  12.     h1=Math.floor(t1/1000/60/60%24);
  13.     m1=Math.floor(t1/1000/60%60);
  14.     s1=Math.floor(t1/1000%60);
  15.   }
  16.   document.getElementById(“t_d1”).innerHTML = d1 + ” 天”;
  17.   document.getElementById(“t_h1”).innerHTML = h1 + ” 时”;
  18.   document.getElementById(“t_m1”).innerHTML = m1 + ” 分”;
  19.   document.getElementById(“t_s1”).innerHTML = s1 + ” 秒”;
  20. }
  21. setInterval(GetRTime1,0);
  22. ******对应第一个展示的信息倒计时的结束,用的时候删除这句话!******
  23. ******对应第二个展示的信息倒计时的开始,用的时候删除这句话!******
  24.   function GetRTime2(){/*阿里云剩余时间*/
  25.   var EndTime2= new Date(‘2017/09/20 00:00:00’);
  26.   var NowTime2 = new Date();
  27.   var t2 =EndTime2.getTime() – NowTime2.getTime();
  28.   var d2=0;
  29.   var h2=0;
  30.   var m2=0;
  31.   var s2=0;
  32.   if(t2>=0){
  33.     d2=Math.floor(t2/1000/60/60/24);
  34.     h2=Math.floor(t2/1000/60/60%24);
  35.     m2=Math.floor(t2/1000/60%60);
  36.     s2=Math.floor(t2/1000%60);
  37.   }
  38.   document.getElementById(“t_d2”).innerHTML = d2 + ” 天”;
  39.   document.getElementById(“t_h2”).innerHTML = h2 + ” 时”;
  40.   document.getElementById(“t_m2”).innerHTML = m2 + ” 分”;
  41.   document.getElementById(“t_s2”).innerHTML = s2 + ” 秒”;
  42. }
  43. setInterval(GetRTime2,0);
  44. ******对应第二个展示的信息倒计时的结束,用的时候删除这句话!******
这段js代码可以看出第一段和第二段也是基本相同的,所以添加多个信息的js代码也只需要复制粘贴就好了,不过也有需要注意修改的。如下:(以下代码只做说明,无需添加)
  1. GetRTime1
  2. EndTime1
  3. NowTime1
  4. d1
  5. h1
  6. m1
  7. s1

        代码中出现的这些都应该是对应每一个信息的顺序,如果是第二个就需要相应的修改成2,以此类推。

  1. EndTime1= new Date(‘2019/03/03 15:25:46’);
修改相应的剩余时间:参考上面的代码,可以看到EndTime后面对应一个日期,这个就表示最后到期的时间,在这里把每个信息最后的时间设置好就可以了。

3、最后就是css美化了,这个可以自己随意。

css样板

  1. .green{}
  2. .money,.time,.rest{}
  3. .icon{
  4. }
  5. .content{
  6. position:relative;
  7. }
  8. .all{
  9. clear:left;
  10. }
  11. .icon{
  12. width:24px;
  13. float:left;
  14. }
  15. @media screen and (max-width:640px){
  16. .icon{width:24px;}
  17. .icons{padding-top:5px;}
  18. }
  19. .icons{
  20. padding-top:5px;
  21. }
  22. .describe{
  23. float:left;
  24. }
  25. .name,.money,.time,.rest,.moneys,.times,.rests{
  26. float:left;
  27. }
  28. .title{
  29.     width:100%;
  30.     height:30px;
  31.     line-height:30px;
  32. }
  33. .name{
  34.     width:35%;
  35.     height:30px;
  36.     line-height:30px;
  37. }
  38. .money{
  39.     width:15%;
  40.     height:30px;
  41.     line-height:30px;
  42.         color:#1ecd97;
  43. }
  44. .time{
  45.     width:15%;
  46.     height:30px;
  47.     line-height:30px;
  48.         color:#1ecd97;
  49. }
  50. .moneys{
  51.     width:15%;
  52.     height:30px;
  53.     line-height:30px;
  54. }
  55. .times{
  56.     width:15%;
  57.     height:30px;
  58.     line-height:30px;
  59. }
  60. .rest{
  61.     width:34%;
  62.     height:30px;
  63.     line-height:30px;
  64. }
  65. .rests{
  66.     width:34%;
  67.     height:30px;
  68.     line-height:30px;
  69. }
  70. .content{
  71.     width:100%;
  72. }
  73. @media screen and (max-width:640px){
  74. .name{width:60%;height:60px;}
  75. .money{width:38%;height:60px;}
  76. .time{width:29%;display:none;}
  77. .moneys{width:38%;height:60px;}
  78. .times{display:none;}
  79. .rest{display:none;}
  80. .rests{display:none;}
  81. }
  82. .title,.name,.money,.time,.rest,.moneys,.times,.rests{
  83. border:0px solid black;
  84. text-align:center;

扩展加强

看到有朋友评论说,能不能倒计时结束后提示文字?这当然也是可行,要实现这个也很简单,在原有的代码上扩展一下就可以了。

在原有的js代码上添加判断就行了,如下:

  1. ******对应第一个展示的信息倒计时的开始,用的时候删除这句话!******
  2. function GetRTime1(){/*阿里云剩余时间*/
  3.   var EndTime1= new Date(‘2017/12/03 15:25:46‘);
  4.   var NowTime1 = new Date();
  5.   var t1 =EndTime1.getTime() – NowTime1.getTime();
  6.   var d1=0;
  7.   var h1=0;
  8.   var m1=0;
  9.   var s1=0;
  10.   if(t1>=0){
  11.     d1=Math.floor(t1/1000/60/60/24);
  12.     h1=Math.floor(t1/1000/60/60%24);
  13.     m1=Math.floor(t1/1000/60%60);
  14.     s1=Math.floor(t1/1000%60);
  15.   }
  16.   document.getElementById(“t_d1”).innerHTML = d1 + ” 天”;
  17.   document.getElementById(“t_h1”).innerHTML = h1 + ” 时”;
  18.   document.getElementById(“t_m1”).innerHTML = m1 + ” 分”;
  19.   document.getElementById(“t_s1”).innerHTML = s1 + ” 秒”;
  20.   if(s1==“0” && m1==“0” && h1==“0” && d1==“0”){
  21. ******这是为了隐藏结束后的倒计时0000,为了好看点,不想隐藏的话可以不加,用的时候删除这句话!******
  22.     document.getElementById(“t_d1”).innerHTML = “”;
  23.        document.getElementById(“t_h1”).innerHTML = “”;
  24.        document.getElementById(“t_m1”).innerHTML = “”;
  25.        document.getElementById(“t_s1”).innerHTML = “”;
  26. ******这是为了隐藏结束后的倒计时0000的结束,用的时候删除这句话!******
  27.        document.getElementById(“daoqi”).innerHTML =” 抱歉,时间到了 “;//这里设置到期时间后的提醒内容
  28.        document.getElementById(“daoqi”).style.color=“red”;}  //这里设置到期时间后提醒内容的颜色
  29. }
  30. setInterval(GetRTime1,0);
  31. ******对应第一个展示的信息倒计时的结束,用的时候删除这句话!******

顺便为了更好看点,可以把之前文本里的编辑内容稍微修改下,不然隐藏了还出现几个空白框。代码如下:

  1. <span style=“color:#1ecd97” id=“t_d1”></span><span style=“color:#1ecd97” id=“t_h1”></span><span style=“color:#1ecd97” id=“t_m1”></span><span style=“color:#1ecd97” id=“t_s1”></span><span id=“daoqi”></span>
提示

如果你需要每个信息结束后都有提示,就必须每个信息对应的js都要添加,注意信息对应的顺序也要修改哦:t_d1、t_h1、t_m1和t_s1。

微信公众号:rizhuti
关注我们,获取更多的全网素材资源,有趣有料!
12000人已关注
分享到:
赞(0) 打赏

评论抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏