这篇文章上次修改于 1920 天前,可能其部分内容已经发生变化,如有疑问可询问作者。
在 Fantasy 主题上,我首次在页脚应用了两栏布局。相对于之前只有一行版权信息居中在下的那套设计,这种设计让 Fantasy 和我的其他作品相比更加脱颖而出了!
而其页脚的其中一个功能就是运行时间的展示了,这个功能的设计思路也很简单。通过 现在时间 - 建站时间
的方式,就可以获得时长。我们把天数减去之后,剩下的就是小时,再减去就是分钟... 以此类推就可以得到我们想要的结果了!
在我编写的过程中,我也了解过其他人的写法,他们的写法各式各样,有一些人的方法大量运用了 Date
对象的 getDay
、getHours
一类的东西来处理建站时间,再拿现在时间得到的天数、小时去减建站时间才得到运行时间,这种做法显然看起来很冗余!我自己的办法就是利用 Unix 时间戳
来进行处理,这样更加一目了然了~
其中有一个最主要的方法是 Date.parse()
支持将字符串直接转换成时间戳(需要除去 1000 才是正确的结果),在后面计算天数的时候有一个数字是 864e5
,这个数字其实就是 86400000
的简写。
function run_date(date){
// 建站日期
var created = Date.parse(date);
// 现在时间
var now = new Date().getTime();
// 存活时间
var cha = now - created;
// 有多少天
var day = cha / 864e5;
// 取整数输出天
var day_c = Math.floor(day);
// 减去整数的天,得出剩下的小数,并变成小时(1 天等于 24 小时)
var hour = 24 * (day - day_c);
// 取整数输出小时
var hour_c = Math.floor(hour);
// 减去剩下的小时,得出剩下的小数,几分钟(1小时等于60分)
var min = 60 * (hour - hour_c);
// 取整数输出分钟
var min_c = Math.floor(min);
// 剩下的就是秒,直接取整
var sec = Math.floor(60 * (min - min_c));
return "站点已萌萌哒存活了 <a>" + day_c + "</a> 天 <a>" + hour_c + "</a> 小时 <a>" + min_c + "</a> 分 <a>" + sec + "</a> 秒";
}
然后我们通过 setInterval
方法,让它每秒运行处理一次,就可以实现刷新了!
setInterval(function () {
你的元素选择器.innerHTML = run_date("2018/1/1");
}, 1000);
添加到模板
如果要添加到一个模板上,需要修改模板的 footer.php
文件,在你喜欢的位置上创建一个 div
或者是 span
标签,并设置一个类名,例如这样:
<span class="foot-date">站点已萌萌哒存活了 <a>?</a> 天 <a>?</a> 小时 <a>?</a> 分 <a>?</a> 秒</span>
复制上方 JS 代码,将 “元素选择器” 改成 document.querySelector(".foot-date")
并填入你的建站时间,放在模板内任一 JS 文件里面就可以了!如果你使用的是我开发的主题,你可以把 “元素选择器” 写成 ks.select(".foot-date")
,更加简便易懂。
想要补零?
通过添加这段函数,就可以实现补零的操作了!
function add_zero(num){
if(num.toString().length < 2){
num = "0" + num;
}
return num;
}
把需要补零的数字参数(例如 sec
)改成 add_zero(sec)
就可以了!
Enjoy it!
已有 7 条评论
马克
我现在就是用的您的这个主题,我该怎么设置这个呢? 想给自己站点加运行时间
@cyalias 我把这个教程完善一下吧,记得关注一下哈
@Paul 非常感谢您的帮忙,我的已经设置好啦,感谢,感谢
刚好需要,马上弄上去
刚好需要,谢谢 Dalao 了
Mark,留着备用 ~o(〃'▽'〃)o