Argon使用教程，1Panel，wordpress主题

1
<div class="progress-wrapper" style="padding: 0">
2
<div class="progress-info">
3
<div class="progress-label">
4
<span id="yearprogress_yearname"></span>
5
</div>
6
<div id="yearprogress_text_container" class="progress-percentage">
7
<span id="yearprogress_progresstext"></span>
8
<span id="yearprogress_progresstext_full"></span>
9
</div>
10
</div>
11
<div class="progress">
12
<div id="yearprogress_progressbar" class="progress-bar bg-primary"></div>
13
</div>
14
</div>
15
<script no-pjax="">
16
function yearprogress_refresh() {
17
let year = new Date().getFullYear();
18
$("#yearprogress_yearname").text(year);
19
let from = new Date(year, 0, 1, 0, 0, 0);
20
let to = new Date(year, 11, 31, 23, 59, 59);
21
let now = new Date();
22
let progress = (((now - from) / (to - from + 1)) * 100).toFixed(7);
23
let progressshort = (((now - from) / (to - from + 1)) * 100).toFixed(2);
24
$("#yearprogress_progresstext").text(progressshort + "%");
25
$("#yearprogress_progresstext_full").text(progress + "%");
26
$("#yearprogress_progressbar").css("width", progress + "%");
27
}
28
yearprogress_refresh();
29
if (typeof yearProgressIntervalHasSet == "undefined") {
30
var yearProgressIntervalHasSet = true;
31
setInterval(function () {
32
yearprogress_refresh();
33
}, 500);
34
}
35
</script>
36
<style>
37
#yearprogress_text_container {
38
width: 100%;
39
height: 22px;
40
overflow: hidden;
41
user-select: none;
42
}
43
#yearprogress_text_container > span {
44
transition: all 0.3s ease;
45
display: block;
46
}
47
#yearprogress_text_container:hover > span {
48
transform: translateY(-45px);
49
}
50
</style>