标题才刚开始，反正就是这个意思.这个东西在别人的博客里也看到过，我觉得是个有趣的东西，就无耻的扒了下来。你可以记录一些信息的剩余时间，比如域名、服务器等。，主要看你喜欢录什么。没有限制，添加简单又不错。我推荐给大家。
WordPress 添加相关信息的倒计时(剩余时间)记录。
方法如下
1.编辑页面或文章时，切换到文本模式，并以以下格式编辑内容:
<div class="all"><!--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/" rel="external nofollow" rel="external nofollow" 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" 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。
本文章已结束，如转载请注明：汇站网 » WordPress 添加了相关信息倒计时(剩余时间)的记录
