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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
| <div class="progress-wrapper" style="padding: 0">
<div class="progress-info">
<div class="progress-label">
<span id="yearprogress_yearname" style="font-size: 1.3em; font-weight: bold"></span>
</div>
<div id="yearprogress_text_container" class="progress-percentage">
<span id="yearprogress_progresstext" style="font-weight: bold"></span>
<span id="yearprogress_progresstext_full" style="font-weight: bold"></span>
</div>
</div>
<div class="progress">
<div id="yearprogress_progressbar" class="progress-bar bg-primary"></div>
</div>
<div class="progress-info" style="margin-top: 12px; display: flex; align-items: center; justify-content: space-between">
<div style="display: flex; align-items: center; gap: 8px">
<span id="season_icon" style="font-size: 1.2em">🌱</span>
<span id="season_name" style="font-weight: normal"></span>
</div>
<div id="season_text_container" class="progress-percentage">
<span id="season_progresstext" style="font-weight: normal"></span>
<span id="season_progresstext_full" style="font-weight: normal"></span>
</div>
</div>
<div class="progress">
<div id="season_progressbar" class="progress-bar"></div>
</div>
</div>
<script no-pjax="">
function getSeason(month) {
if (month >= 2 && month <= 4) return {name: "春季", startMonth: 2, endMonth: 4, color: '#4cff7e', icon: '🌱'};
if (month >= 5 && month <= 7) return {name: "夏季", startMonth: 5, endMonth: 7, color: '#dc4437', icon: '☀️'};
if (month >= 8 && month <= 10) return {name: "秋季", startMonth: 8, endMonth: 10, color: '#ffcc4c', icon: '🍂'};
return {name: "冬季", startMonth: 11, endMonth: 1, color: '#4ccbff', icon: '❄️'};
}
function yearprogress_refresh() {
if (!document.getElementById("yearprogress_yearname")) return;
let now = new Date();
let year = now.getFullYear();
$("#yearprogress_yearname").text(year);
let from = new Date(year, 0, 1, 0, 0, 0);
let to = new Date(year, 11, 31, 23, 59, 59);
let progress = (((now - from) / (to - from + 1)) * 100).toFixed(7);
let progressshort = (((now - from) / (to - from + 1)) * 100).toFixed(2);
$("#yearprogress_progresstext").text(progressshort + "%");
$("#yearprogress_progresstext_full").text(progress + "%");
$("#yearprogress_progressbar").css({"width": progress + "%", "background-color": "#607d8b"});
const yearColor = "#607d8b";
$("#yearprogress_yearname").css("color", yearColor);
$("#yearprogress_progresstext").css("color", yearColor);
$("#yearprogress_progresstext_full").css("color", yearColor);
const month = now.getMonth();
const season = getSeason(month);
let startYear = year;
let endYear = year;
if (season.name === "冬季") {
if (month === 11) {
startYear = year;
endYear = year + 1;
} else {
startYear = year - 1;
endYear = year;
}
}
let seasonStart = new Date(startYear, season.startMonth, 1, 0, 0, 0);
let seasonEnd = new Date(endYear, season.endMonth + 1, 0, 23, 59, 59);
let seasonProgress = ((now - seasonStart) / (seasonEnd - seasonStart)) * 100;
if (seasonProgress > 100) seasonProgress = 100;
if (seasonProgress < 0) seasonProgress = 0;
$("#season_name").text(season.name);
$("#season_progresstext").text(seasonProgress.toFixed(2) + "%");
$("#season_progresstext_full").text(seasonProgress.toFixed(7) + "%");
$("#season_progressbar").css("width", seasonProgress + "%");
$("#season_name").css("color", season.color);
$("#season_progresstext").css("color", season.color);
$("#season_progresstext_full").css("color", season.color);
$("#season_icon").text(season.icon);
$("#season_progressbar").css("background-color", season.color);
}
yearprogress_refresh();
if (window.__yearProgressIntervalId) clearInterval(window.__yearProgressIntervalId);
window.__yearProgressIntervalId = setInterval(yearprogress_refresh, 500);
</script>
<style>
#yearprogress_text_container, #season_text_container {
width: 100%;
height: 22px;
overflow: hidden;
user-select: none;
}
#yearprogress_text_container > span, #season_text_container > span {
transition: all 0.3s ease;
display: block;
}
#yearprogress_text_container:hover > span, #season_text_container:hover > span {
transform: translateY(-45px);
}
#season_progressbar {
transition: width 0.5s ease, background-color 0.5s ease;
}
</style>
|
