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

标题才刚开始，反正就是这个意思.这个东西在别人的博客里也看到过，我觉得是个有趣的东西，就无耻的扒了下来。你可以记录一些信息的剩余时间，比如域名、服务器等。，主要看你喜欢录什么。没有限制，添加简单又不错。我推荐给大家。

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

方法如下
1.编辑页面或文章时，切换到文本模式，并以以下格式编辑内容:

<div class="all"&gt;<!--all-->      
******这是第一行的信息说明，用的时候删除这句话！******      
        <div class="name">名称</div>      
        <div class="moneys">金额（元）</div>      
        <div class="times">期限（年）</div>      
        <div class="rests">剩余（天）</div>      
    </div>      
******这是第一个想要展示的信息倒计时开始，用的时候删除这句话！******      
    <div class="all"><!--all-->      
        <div class="name"><a href="http://www.macrr.com/" target="_blank" title="阿里云">阿里云主机</a></div>      
        <div class="money"><code><span>100.00元</span></code></div>      
        <div class="time"><code><span>2</span></code></div>      
        <div class="rest">      
            <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>      
        </div>      
    </div>      
******这是第一个想要展示的信息倒计时结束，用的时候删除这句话！******      
******这是第二个想要展示的信息倒计时，用的时候删除这句话！******      
<div class="all"><!--all-->      
        <div class="name"><a href="http://www.macrr.com/" rel="external nofollow"  target="_blank" title="阿里云">阿里云主机</a></div>      
        <div class="money"><code><span>100.00元</span></code></div>      
        <div class="time"><code><span>1</span></code></div>      
        <div class="rest">      
            <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>      
        </div>      
    </div>      
******这是第二个想要展示的信息倒计时结束，用的时候删除这句话！******

如果只显示一个类别，第一行的信息描述只需要编辑一次。其实后面的每个信息倒计时都是重复的。要增加信息倒计时，你只需要复制这个信息，粘贴在后面就可以了。有几点需要注意如下:(以下代码仅供说明，无需补充)

<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>  

这里我们可以看到有t_d1、t_h1、t_m1、t_s1，对应第一条消息的计时日、小时、分、秒，然后第二条倒计时消息会出现一样的情况，但需要改为t_d2、t_h2、t_m2、t_s2，第三条消息会类比修改。代码中的链接也需要自己修改。

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

******对应第一个展示的信息倒计时的开始，用的时候删除这句话！******      
function GetRTime1(){/*阿里云剩余时间*/      
  var EndTime1= new Date('2017/12/03 15:25:46');      
  var NowTime1 = new Date();      
  var t1 =EndTime1.getTime() - NowTime1.getTime();      
  var d1=0;      
  var h1=0;      
  var m1=0;      
  var s1=0;      
  if(t1>=0){      
    d1=Math.floor(t1/1000/60/60/24);      
    h1=Math.floor(t1/1000/60/60%24);      
    m1=Math.floor(t1/1000/60%60);      
    s1=Math.floor(t1/1000%60);      
  }      
  document.getElementById("t_d1").innerHTML = d1 + " 天";      
  document.getElementById("t_h1").innerHTML = h1 + " 时";      
  document.getElementById("t_m1").innerHTML = m1 + " 分";      
  document.getElementById("t_s1").innerHTML = s1 + " 秒";      
}      
setInterval(GetRTime1,0);      
******对应第一个展示的信息倒计时的结束，用的时候删除这句话！******      
******对应第二个展示的信息倒计时的开始，用的时候删除这句话！******      
  function GetRTime2(){/*阿里云剩余时间*/      
  var EndTime2= new Date('2017/09/20 00:00:00');      
  var NowTime2 = new Date();      
  var t2 =EndTime2.getTime() - NowTime2.getTime();      
  var d2=0;      
  var h2=0;      
  var m2=0;      
  var s2=0;      
  if(t2>=0){      
    d2=Math.floor(t2/1000/60/60/24);      
    h2=Math.floor(t2/1000/60/60%24);      
    m2=Math.floor(t2/1000/60%60);      
    s2=Math.floor(t2/1000%60);      
  }      
  document.getElementById("t_d2").innerHTML = d2 + " 天";      
  document.getElementById("t_h2").innerHTML = h2 + " 时";      
  document.getElementById("t_m2").innerHTML = m2 + " 分";      
  document.getElementById("t_s2").innerHTML = s2 + " 秒";      
}      
setInterval(GetRTime2,0);     
******对应第二个展示的信息倒计时的结束，用的时候删除这句话！******     

从这段js代码中可以看出，第一段和第二段基本相同，所以多信息的js代码只需要复制粘贴，但也需要修改。如下:(以下代码仅用于说明，无需添加)

GetRTime1  
EndTime1  
NowTime1  
d1  
h1  
m1  
s1  

代码中的这些项目应该按照对应于每条信息的顺序排列。如果是第二项，需要修改为2，以此类推。

EndTime1= new Date('2019/03/03 15:25:46');   

修改对应的剩余时间:参考上面的代码，可以看到EndTime后面有一个日期，表示最后的到期时间。只需在这里设置每条消息的最后时间。

3.最后，css美化。你想做什么都可以。
Css模板扩展

感觉自己写的文章乱七八糟的，更别提大神了。为了让小白更清楚地喜欢我，我会试着阅读它们。

扩大和加强
有朋友评论，倒计时后可以提示文字吗？当然，这也是可行的，实现起来也很简单，只需扩展原代码即可。
Wordpress添加相关信息的倒计时(剩余时间)记录。
只需将判断添加到原始js代码中，如下所示:

******对应第一个展示的信息倒计时的开始，用的时候删除这句话！******        
function GetRTime1(){/*阿里云剩余时间*/        
  var EndTime1= new Date('2017/12/03 15:25:46');        
  var NowTime1 = new Date();        
  var t1 =EndTime1.getTime() - NowTime1.getTime();        
  var d1=0;        
  var h1=0;        
  var m1=0;        
  var s1=0;        
  if(t1>=0){        
    d1=Math.floor(t1/1000/60/60/24);        
    h1=Math.floor(t1/1000/60/60%24);        
    m1=Math.floor(t1/1000/60%60);        
    s1=Math.floor(t1/1000%60);        
  }        
  document.getElementById("t_d1").innerHTML = d1 + " 天";        
  document.getElementById("t_h1").innerHTML = h1 + " 时";        
  document.getElementById("t_m1").innerHTML = m1 + " 分";        
  document.getElementById("t_s1").innerHTML = s1 + " 秒";      
  if(s1=="0" && m1=="0" && h1=="0" && d1=="0"){  
******这是为了隐藏结束后的倒计时0000，为了好看点，不想隐藏的话可以不加，用的时候删除这句话！******    
    document.getElementById("t_d1").innerHTML = "";  
       document.getElementById("t_h1").innerHTML = "";  
       document.getElementById("t_m1").innerHTML = "";  
       document.getElementById("t_s1").innerHTML = "";  
******这是为了隐藏结束后的倒计时0000的结束，用的时候删除这句话！******    
       document.getElementById("daoqi").innerHTML =" 抱歉，时间到了 ";//这里设置到期时间后的提醒内容  
       document.getElementById("daoqi").style.color="red";}  //这里设置到期时间后提醒内容的颜色  
}        
setInterval(GetRTime1,0);        
******对应第一个展示的信息倒计时的结束，用的时候删除这句话！******        

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

<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。