WordPress添加相关信息倒计时(剩余时间)的记录

标题随便起的,反正就是那个意思吧......这个东西也是在逛别人的博客看到的,觉得是一个有意思的东西,就无耻的扒下来了。可以记录一些信息剩余时间,比如域名、服务器等等,主要看自己喜欢记录什么,没有限制,增添也很简单,蛮好的,推荐给大家。

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;  


        感觉文章被我写的很乱,大神就不用说了,为了让和我一样的小白更清楚一点,将就着看吧。

扩展加强

看到有朋友评论说,能不能倒计时结束后提示文字?这当然也是可行,要实现这个也很简单,在原有的代码上扩展一下就可以了。
Wordpress添加相关信息倒计时(剩余时间)的记录
在原有的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。

发表评论

:?::razz::sad::evil::!::smile::oops::grin::eek::shock::???::cool::lol::mad::twisted::roll::wink::idea::arrow::neutral::cry::mrgreen:

目前评论:78   其中:访客  24   博主  15

    • 橘子书 橘子书 4 来自天朝的朋友 QQ浏览器 Windows 10 福建省漳州市 电信

      这个小功能,适合那种营销性博客。比如搞促销,vps、商品等等。

      • 宅小猫 宅小猫 1 来自天朝的朋友 谷歌浏览器 Windows 7 河南省郑州市 电信

        总感觉这个倒计时好像是不是跟网站运行时间用的是同一个代码啊?

          • 闲鱼 闲鱼 【博主】 来自天朝的朋友 QQ浏览器 Windows 7 湖南省长沙市 电信

            @宅小猫 差不多类型的