前序

忘了在哪看到的这个东西,总之看到了一次就忘不掉了
然后就拿我那差的要命的技术写了个这

屎山这个东西还没到这个程度

建议你先将文章过一遍,这样可以更清楚的知道自己下一步要干什么。

这东东貌似有小BUG

%ThemeSource%
位于~\themes\Butterfly\source\
%Source%
位于~\source\
%ThemeLayout%
位于~\themes\Butterfly\layout\

预览

Progress Tracker
本年过了 74.81801%
本月过了 99.44633%
本天过了 83.38992%
本小时过了 1.35817%
本分钟过了 80.00000%
查看代码

单独页面

https://blog.admincmd.xyz/favi/

Github 仓库
https://github.com/admincmd-a/Time-flies

Gitee 页面
https://gitee.com/administrator-command-prompt/Time-flies

引入

引入 JS

以下文件放进%ThemeSource%\js\time.js

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
31
32
33
34
35
36
37
38
39
40
41
42
function updateProgressBars() {
const now = new Date();
// const yearProgress = (now.getTime() / new Date(now.getFullYear(), 0, 1).getTime()) * 100;
const yearStart = new Date(now.getFullYear(), 0, 1, 0, 0, 0).getTime();
const yearEnd = new Date(now.getFullYear() + 1, 0, 1, 0, 0, 0).getTime();
const yearProgress = ((now.getTime() - yearStart) / (yearEnd - yearStart)) * 100;
// 计算本月已过百分比
const monthStart = new Date(now.getFullYear(), now.getMonth(), 1, 0, 0, 0).getTime();
const monthEnd = new Date(now.getFullYear(), now.getMonth() + 1, 1, 0, 0, 0).getTime();
const monthProgress = ((now.getTime() - monthStart) / (monthEnd - monthStart)) * 100;

// 计算本天已过百分比
const dayStart = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 0, 0, 0).getTime();
const dayEnd = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1, 0, 0, 0).getTime();
const dayProgress = ((now.getTime() - dayStart) / (dayEnd - dayStart)) * 100;

// 计算已过小时百分比
const hourStart = new Date(now.getFullYear(), now.getMonth(), now.getDate(), now.getHours(), 0, 0).getTime();
const hourEnd = new Date(now.getFullYear(), now.getMonth(), now.getDate(), now.getHours() + 1, 0, 0).getTime();
const hourProgress = ((now.getTime() - hourStart) / (hourEnd - hourStart)) * 100;


const minuteProgress = (now.getSeconds() / 60) * 100;// 计算已过分钟百分比

document.getElementById('year-progress').textContent = yearProgress.toFixed(5) + '%';
document.getElementById('year-progress-bar').style.width = yearProgress.toFixed(5) + '%';// 宽度百分比

document.getElementById('month-progress').textContent = monthProgress.toFixed(5) + '%';
document.getElementById('month-progress-bar').style.width = monthProgress.toFixed(5) + '%';// 同上

document.getElementById('day-progress').textContent = dayProgress.toFixed(5) + '%';
document.getElementById('day-progress-bar').style.width = dayProgress.toFixed(5) + '%';

document.getElementById('hour-progress').textContent = hourProgress.toFixed(5) + '%';
document.getElementById('hour-progress-bar').style.width = hourProgress.toFixed(5) + '%';

document.getElementById('minute-progress').textContent = minuteProgress.toFixed(5) + '%';
document.getElementById('minute-progress-bar').style.width = minuteProgress.toFixed(5) + '%';

}

setInterval(updateProgressBars, 1000);//每秒更新一次

引入 CSS

将下面的CSS丢到%ThemeSource%\css\time.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
body 
.progress-container {
margin-bottom: 10px;
}
.progress-label {
margin-bottom: 5px;
}
.progress-bar {
width: 100%;
background-color: #ddd;/*进度条背景色*/
border-radius: 5px;/*圆角*/
overflow: hidden;
}
.progress-bar-inner {
height: 15px;/*进度条高度*/
background-color: #4caf50;/*进度条颜色*/
text-align: center;
color: white;/*背景颜色*/
line-height: 20px;
transition: width 1.5s;/*一次到目标位置的速度*/
}

添加

自己看不过去了
不想改了

刚写好的样子
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
31
32
33
34
35
36
37
38
39
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/css/time.css">
</head>
<body>
<div class="progress-container" id="time-flies">
<div class="progress-label">本年过了 <span id="year-progress">0.00000%</span></div>
<div class="progress-bar">
<div class="progress-bar-inner" id="year-progress-bar"></div>
</div>
</div>
<div class="progress-container">
<div class="progress-label">本月过了 <span id="month-progress">0.00000%</span></div>
<div class="progress-bar">
<div class="progress-bar-inner" id="month-progress-bar"></div>
</div>
</div>
<div class="progress-container">
<div class="progress-label">本天过了 <span id="day-progress">0.00000%</span></div>
<div class="progress-bar">
<div class="progress-bar-inner" id="day-progress-bar"></div>
</div>
</div>
<div class="progress-container">
<div class="progress-label">本小时过了 <span id="hour-progress">0.00000%</span></div>
<div class="progress-bar">
<div class="progress-bar-inner" id="hour-progress-bar"></div>
</div>
</div>
<div class="progress-container">
<div class="progress-label">本分钟过了 <span id="minute-progress">0.00000%</span></div>
<div class="progress-bar">
<div class="progress-bar-inner" id="minute-progress-bar"></div>
</div>
</div>
<script src="/js/time.js"></script>
</body>
</html>

单独页面

创建%ThemeLayout%\includes\page\time.pug
放入以下内容

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
31
32
33
34
html
head
meta(name="viewport", content="width=device-width, initial-scale=1.0")
link(
href="/css/time.css"
rel="stylesheet"
)
body
.progress-container
.progress-label 本年过了
span#year-progress 0.00000%
.progress-bar
.progress-bar-inner#year-progress-bar
.progress-container
.progress-label 本月过了
span#month-progress 0.00000%
.progress-bar
.progress-bar-inner#month-progress-bar
.progress-container
.progress-label 本天过了
span#day-progress 0.00000%
.progress-bar
.progress-bar-inner#day-progress-bar
.progress-container
.progress-label 本小时过了
span#hour-progress 0.00000%
.progress-bar
.progress-bar-inner#hour-progress-bar
.progress-container
.progress-label 本分钟过了
span#minute-progress 0.00000%
.progress-bar
.progress-bar-inner#minute-progress-bar
script(src="/js/time.js")

创建%ThemeLayout%\page.pug
放入以下内容

1
2
3
4
5
6
7
8
9
10
extends includes/layout.pug

......
when 'about'
include includes/page/about.pug
+ when 'time'
+ include includes/page/time.pug
......

comments/index', {}, {cache: true})

插入 + 后面的内容即可,删除 + 号后无需添加空格

创建%Source%\time\index.md
放入以下内容

1
2
3
4
5
6
7
8
---
title: 时光飞逝
date: 2021-03-30 15:57:51
aside: false
top_img: false
comments: false
type: "time"
---

hexo g + s 即可看到效果