去吧,孩子

WordPress-免插件JS代码计时器(非倒计时)

今天无意中看到一个米农的装饰网站wo.ai.ni,里面的一个恋爱天数计时器让我颇为感动,于是在网上搜索计时器代码,无奈全是倒计时,包括各种插件也是以倒计时为主,虽然计时与倒计时只是个别代码方向的调换,但对于我等门外汉还是费了一番功夫。最后通过查看网页源代码,参考网上的两篇文章,并对代码进行优化,终于搞定。

你只需将以下代码插入到主题目录下header.php(或者footer.php等其他位置)你想要插入的位置即可。代码如下:

<!--恋爱计时器-->
<script type="text/javascript">
function secondToDate(seconds){
 var days = Math.floor(seconds / (3600 * 24));
 seconds = seconds % (3600 * 24);
 var hours = Math.floor(seconds / 3600);
 if (hours < 10) {
 hours = "0" + hours;
 }
 seconds = seconds % 3600;
 var minutes = Math.floor(seconds / 60);
 if (minutes < 10) {
 minutes = "0" + minutes;
 }
 seconds = seconds % 60;
 if (seconds < 10) {
 seconds = "0" + seconds;
 }
 if(days >= 0){
 document.getElementById("time").innerHTML = days + '天' + hours + '时' + minutes + '分' + seconds + '秒';
 }
 else {
 document.getElementById("time_back").innerHTML = "亲爱的,时光回去了,你还会爱我么?";
 }
}
secondToDate();
</script>
<script type="text/javascript" language="javascript">
 function setTime() {
 // 下面是你要设置的时间点,时间格式中,月比较特殊,是从0开始的,所以想要显示3月,得写2才行,如下
 var create_time = Math.round(new Date(Date.UTC(2012, 2, 2, 0, 0, 0)).getTime() / 1000);
 // 当前时间秒数,增加时区的差异
 var timestamp = Math.round((new Date().getTime() + 8 * 60 * 60 * 1000) / 1000);
 currentTime = secondToDate((timestamp - create_time));
 }
 setInterval(setTime, 1000);
</script>
<div id="time_back" style="text-align: center; color: white;font-size: 16px; ">Dear ,&nbsp;&nbsp;I like you already...</div>
<div id="" style="text-align: right; margin: 10px auto 10px; "><span id="time" style="color: white;font-size: 16px;"></span></div>
<!--恋爱计时器-->

代码可能不是很工整、简洁,不过可以用了,现在就可以记录孩子的出生时间、恋爱时间或者网站运行时间了。

P.S.  如果时间真的可以倒流,这款计时器还是很温馨的。

参考文章:

使用简单JS 代码给WordPress 博客侧边栏添加倒计时显示功能

WP实现网站运行天数代码

Categories: GET新技能

WordPress-响应式主题自定义手机浏览显示内容 » « WordPress-安全防护

2 Comments

  1. 不太明白怎么插入到自己想要放的位置,可以指教下吗?

    • @xiaoli 不好意思,这么晚回复你。
      比如你可以放到header.php里的head标签之间,你可以放进去试试,看下效果再调整。

发表评论

Your email address will not be published.

*

Copyright © 2010-2018 去吧,孩子 - UP ↑