前序
忘了在哪看到的这个东西,总之看到了一次就忘不掉了
然后就拿我那差的要命的技术写了个这
屎山这个东西还没到这个程度
建议你先将文章过一遍,这样可以更清楚的知道自己下一步要干什么。
这东东貌似有小BUG
%ThemeSource%
位于~\themes\Butterfly\source\
%Source%
位于~\source\
%ThemeLayout%
位于~\themes\Butterfly\layout\
预览
Progress Tracker查看代码
单独页面
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 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 即可看到效果