挺多人问网站页脚的运行天数是怎么实现的,这里贴出我的代码。

ps:当时用的还是hexo-theme-ayer主题,没有像butterfly主题一样集成,所以适用于不带计数的主题或想要动态页脚展示的同学使用。

一、html改动

在路径:Hexo\themes\ayer\layout_partial\footer.ejs中加入runtime_span标签,具体的ul,li层次根据你们自定义的页脚进行设定,最重要的是runtime_span标签要有。

1
2
3
4
5
6
<ul>
<li>
<i class="ri-time-line"></i>
<span id="runtime_span"></span>
</li>
</ul>

二、js添加

一定要在runtime_span标签之后添加js代码,可以在后面直接添加下面的代码,也可以插在同路径下新建一个runtime.ejs文件填入代码后,在runtime_span标签后面插入<%- partial(‘runtime’) %>,两者效果是一样的,我更推荐后者。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script type="text/javascript">			
function show_runtime() {
window.setTimeout("show_runtime()", 1000);
X = new Date("01/20/2021 21:00:00");
Y = new Date();
T = (Y.getTime() - X.getTime());
M = 24 * 60 * 60 * 1000;
a = T / M;
A = Math.floor(a);
b = (a - A) * 24;
B = Math.floor(b);
c = (b - B) * 60;
C = Math.floor((b - B) * 60);
D = Math.floor((c - C) * 60);
runtime_span.innerHTML = "小站于各种崩坏中续存了: " + A + "天" + B + "小时" + C + "分" + D + "秒"
}
show_runtime();
</script>