添加HTML元素

Copy1<a id="running-time"></a>

计算运行时间

时分秒均占2位, 不足则使用0补足

Copy 1const RunningTimerInterval = 1000;
 2const StartTime = new Date("12/31/2023 00:00:00");
 3
 4function prefixZero(num)
 5{
 6    if (num < 10)
 7    {
 8        num = "0" + num;
 9    }
10    return num;
11}
12
13function updateTime()
14{
15    const currentTime = new Date();
16    let runningTime = currentTime.getTime() - StartTime.getTime();
17
18    const dayMs = 24 * 60 * 60 * 1000;
19    const runningDays = Math.floor(runningTime / dayMs);
20
21    runningTime -= runningDays * dayMs;
22
23    const hourMs = 60 * 60 * 1000;
24    const runningHours = Math.floor(runningTime / hourMs);
25
26    runningTime -= runningHours * hourMs;
27
28    const minuteMs = 60 * 1000;
29    const runningMinutes = Math.floor(runningTime / minuteMs);
30
31    runningTime -= runningMinutes * minuteMs;
32
33    const runningSeconds = Math.floor(runningTime / 1000);
34
35    // console.log(runningTime - runningSeconds * 1000);
36
37    const showTime = document.getElementById("running-time");
38
39    showTime.innerText =
40        runningDays + "天" + prefixZero(runningHours) + "小时" + prefixZero(runningMinutes) + "分" + prefixZero(runningSeconds) + "秒";
41}
42
43document.addEventListener('DOMContentLoaded', () => { let RunningTimer = setInterval(updateTime, RunningTimerInterval); });

运行脚本

Copy1{{ $built := resources.Get "js/running-time.js" | js.Build "main-running-time.js" | minify | fingerprint "sha512" }}
2{{ with $built }}
3    <script src="{{ $built.RelPermalink }}" integrity="{{ $built.Data.Integrity }}" crossorigin="anonymous"></script>
4{{ end }}

添加旋转齿轮

像之前使用svg链接, 无法使图标运动

获取FontAwesome Kit

1. 注册 FontAwesome 帐号
   

2. 获取脚本
   

   

   
   

3. 拷贝到代码合适位置, 如 head.html
   

添加旋转齿轮

fa-spin 使得齿轮旋转, --fa-animation-duration 设置旋转周期

Copy1<i class="fa-solid fa-gear fa-spin" style="--fa-animation-duration: 3s; "></i>

便签

-
JavaScript - 定时器
博客运行时间
visitor icon
view icon
gear icon
FontAwesome - Animate
theme icon
power icon
use CC
lightbulb icon
refresh icon
inbox icon