站点运行时间

看到别人有在用本站已运行XX年YY月OO日,突然心血来潮很想加一下这个功能,所以就上网找了下……

复制黏贴

找到可以用的代码来自(Ⅱ)NexT主题的优化定制修改指南,具体如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<span id="sitetime"> <br></span>
<script language="javascript">
function siteTime(){
window.setTimeout("siteTime()", 1000);
var seconds = 1000
var minutes = seconds * 60
var hours = minutes * 60
var days = hours * 24
var years = days * 365

var today = new Date()
var todayYear = today.getFullYear()
var todayMonth = today.getMonth()
var todayDate = today.getDate()
var todayHour = today.getHours()
var todayMinute = today.getMinutes()
var todaySecond = today.getSeconds()
var t1 = Date.UTC(2019,6,5,10,40,39)
var t2 = Date.UTC(todayYear,todayMonth,todayDate,todayHour,todayMinute,todaySecond)
var diff = t2-t1

var diffYears = Math.floor(diff/years)
var diffDays = Math.floor((diff/days)-diffYears*365)
var diffHours = Math.floor((diff-(diffYears*365+diffDays)*days)/hours)
var diffMinutes = Math.floor((diff-(diffYears*365+diffDays)*days-diffHours*hours)/minutes)
var diffSeconds = Math.floor((diff-(diffYears*365+diffDays)*days-diffHours*hours-diffMinutes*minutes)/seconds)
// document.getElementById("sitetime").innerHTML=" 本站已运行"+diffYears+" 年 "+diffDays+" 天 "+diffHours+" 小时 "+diffMinutes+" 分钟 "+diffSeconds+" 秒<br>"
}
siteTime()
</script>

然而,却在具体运行的时候碰到如下尴尬的情况:

1
本站已运行-1 年 352 天 15 小时 1 分钟 5 秒

嗯……?

这个运行时间……

好像有点问题……?

那么,撸起袖子就干吧,虽然对JS并不是很熟悉,但是,总归是要以BOP (Baidu Oriented Programming), GOP (Google Oriented Programming), SOP (StackOverflow Oriented Programming)三个为核心思想开始改起代码嘛。


开始修改

代码分析

虽然不会写JS,不过大佬的代码简洁明了,看还是能够看懂的。不过对于Date.UTC()这个函数不是很了解,于是进行了一下搜索。这个函数具体如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var utcDate1 = new Date(Date.UTC(96, 1, 2, 3, 4, 5));
var utcDate2 = new Date(Date.UTC(0, 0, 0, 0, 0, 0));

console.log(utcDate1.toUTCString());
// expected output: Fri, 02 Feb 1996 03:04:05 GMT

console.log(utcDate2.toUTCString());
// expected output: Sun, 31 Dec 1899 00:00:00 GMT

SyntaxSection
ECMAScript 2017 and later:

Date.UTC(year[, month[, day[, hour[, minute[, second[, millisecond]]]]]])
ECMAScript 2016 and earlier: (month used to be required)

Date.UTC(year, month[, day[, hour[, minute[, second[, millisecond]]]]])

所以说,具体传的参数就按照年-月-日-时-分-秒-毫秒这样算的,那么这么看起来……好像上面的代码也没有什么问题。

t1是创建站点的时间,t2则是将参数代入到Date.UTC()之中获取当前的时间。没有用toUTCString()的话,t1t2是会计算分别计算,以毫秒为单位,从_给的时间点_和_现在时间点_到1899年12月31号凌晨12点的时间差。

这么看起来,逻辑毫无问题,那么是哪里出错了……


Debug阶段

因为对javascript的debug非常生疏,而且也不知道在Hexo里面调用是什么样子的,下个目标就这么定下了,好好学习前端的debug方法,所以就使用了老方法——document.write()

随意从网上找个在线JS的编辑器,将下面代码敲了进去:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var today = new Date()
var todayYear = today.getFullYear()
var todayMonth = today.getMonth()
var todayDate = today.getDate()
var todayHour = today.getHours()
var todayMinute = today.getMinutes()
var todaySecond = today.getSeconds()
var t1 = Date.UTC(2019,6,5,2,40,39)
var t2 = Date.UTC(todayYear,todayMonth,todayDate,todayHour,todayMinute,todaySecond)

document.write(t1)
document.write('<br>')

document.write(t2)
document.write('<br>')
var diff = t2-t1
document.write(diff)

得到如下结果:

1562294439000
1561256481000
-1037958000

不知道为什么,现在的时间点比过去还早呢……隐约意识到了什么,所以我加了一行:

document.write(todayYear,'-', todayMonth, '-', todayDate, ' ', todayHour, ':' , todayMinute, ':', todaySecond)

得出来的果然是:

2019-5-23 2:21:21

答案原来还是——

Javascript的话,月份也是从0开始,而现实生活当中的月份就是要从1开始算。Date.UTC里面的参数的取值范围是1-12,然而new Date().getMonth()返回的区间却是0-11。所以,只需要将var todayMonth = today.getMonth()修改成var todayMonth = today.getMonth() + 1,代码就能正常工作啦。


结论

写代码的时候还是要小心一点啦,不管是写也好还是CP大法也好,简单的确认一下保平安噜。


参考资料

(Ⅱ)NexT主题的优化定制修改指南

Date.UTC()

-------The end of this article  Thank you for your reading-------
0%