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

汇站

2021-12-09 WordPress教程 0 470

下单流程：

选择资源

赞助获取

网盘下载

额外（二次开发网站建设）

¥ 0牛币

已下载 323次点赞 (0) 收藏 (0)

立即下载升级会员下单教程售后支持

🔊 下载须知

下载前请认真阅读本重要提示：（如下载链接失效或支付未回调，请联系站长QQ972908224或在网站发私信给站长，信息一定要有：网站会员名称、购买金额、资源链接，见字后会第一时间处理，晚上23点至早上8点期间是站长休息时间，留言即可，请勿频繁发信息。本站以用户的需求为基础，将最有价值的信息和资源分享给广大编程人员及源码爱好者在本地电脑端进行调试、参考和研究，本站不提供任何技术服务！所有资源禁止在服务器或者虚拟机下进行联网搭建运营，禁止任何商业环境使用！所有资源展示图片和描述不代表本站的立场！本站只是存储平台！如需运营请购买正版！杜绝利用本站资源进行触犯国家法律法规，下载者如触犯以上声明，所产生的一切后果由下载者自行承担！请悉知！其次，源码模板过多不能保证每个细节都符合你的需求，也可能存在未知的BUG与瑕疵、残次和版本过旧、破解版本过期等问题。你下载的资源和程序源码组件因其特殊性均为可复制品，所以不支持任何理由的退款兑现；请认真阅读本站声明和相关条款，谨慎斟酌后再下载

汇站

联系Ta

进入TA的商铺联系官方客服

详情介绍
相关文章
发表评论

详情介绍

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

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 添加了相关信息倒计时(剩余时间)的记录