这篇文章上次修改于 1920 天前,可能其部分内容已经发生变化,如有疑问可询问作者。

在 Fantasy 主题上,我首次在页脚应用了两栏布局。相对于之前只有一行版权信息居中在下的那套设计,这种设计让 Fantasy 和我的其他作品相比更加脱颖而出了!

而其页脚的其中一个功能就是运行时间的展示了,这个功能的设计思路也很简单。通过 现在时间 - 建站时间 的方式,就可以获得时长。我们把天数减去之后,剩下的就是小时,再减去就是分钟... 以此类推就可以得到我们想要的结果了!

在我编写的过程中,我也了解过其他人的写法,他们的写法各式各样,有一些人的方法大量运用了 Date 对象的 getDaygetHours 一类的东西来处理建站时间,再拿现在时间得到的天数、小时去减建站时间才得到运行时间,这种做法显然看起来很冗余!我自己的办法就是利用 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!