日期进度条的小插件JavaScript版
前言
今天逛博客发现了一个很好看的日期进度条的小插件，但是是PHP版的，对于Hexo这类静态博客用不了
不过从原理上来说获取时间其实并不是必须要服务器计算，因此按理应该可以转换为纯JavaScript
文章原文->《写了个日期进度条的小插件》
偷了个懒，直接让AI来转
代码版权归 李锋镝的博客 所有
代码
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Countdown Timer</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="countdown-container">
<div class="countdown-item" id="countdown-day">
<span class="countdown-text"></span>
<div class="countdown-progress-bar">
<div class="progress-bar-fill">
<span class="countdown-percentage"></span>
</div>
</div>
</div>
<div class="countdown-item" id="countdown-week">
<span class="countdown-text"></span>
<div class="countdown-progress-bar">
<div class="progress-bar-fill">
<span class="countdown-percentage"></span>
</div>
</div>
</div>
<div class="countdown-item" id="countdown-month">
<span class="countdown-text"></span>
<div class="countdown-progress-bar">
<div class="progress-bar-fill">
<span class="countdown-percentage"></span>
</div>
</div>
</div>
<div class="countdown-item" id="countdown-year">
<span class="countdown-text"></span>
<div class="countdown-progress-bar">
<div class="progress-bar-fill">
<span class="countdown-percentage"></span>
</div>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
styles.css
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
.countdown-container {
background-color: #FAF9F6;
border-radius: 12px;
padding: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
max-width: 500px;
margin: 20px auto;
}
.countdown-item {
height: 50px;
position: relative;
max-height: 80px;
overflow: hidden;
margin-bottom: 15px;
}
.countdown-text {
color: #868e96;
font-size: 0.95em;
}
.countdown-progress-bar {
height: 16px;
background-color: #E8E8E8;
border-radius: 8px;
overflow: hidden;
position: relative;
margin-top: 3px;
}
.progress-bar-fill {
height: 100%;
border-radius: 8px;
transition: width 1s ease;
position: relative;
background-image: repeating-linear-gradient(
-45deg,
rgba(255, 255, 255, 0.2),
rgba(255, 255, 255, 0.2) 10px,
transparent 10px,
transparent 20px
);
background-size: 28px 28px;
animation: spiral-move 1s linear infinite;
}
.countdown-percentage {
font-size: 0.8em;
color: #fff;
position: absolute;
top: 50%;
right: 5px;
transform: translateY(-50%);
z-index: 2;
}
@keyframes spiral-move {
0% {
background-position: 0 0;
}
100% {
background-position: 28px 0;
}
}
script.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
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
// 配置项
const config = {
types: ['day', 'week', 'month', 'year'], // 默认显示所有类型
colorMap: {
'day': '#B5EAD7',
'week': '#FFDAC1',
'month': '#E2F0CB',
'year': '#FFB7B2'
}
};
// 更新倒计时显示
function updateCountdown() {
const now = new Date();
config.types.forEach(type => {
let elapsed = 0;
let total = 0;
let text = "";
switch (type) {
case "day":
elapsed = now.getHours() * 3600 + now.getMinutes() * 60 + now.getSeconds();
total = 24 * 3600;
text = `今天已过去 ${Math.floor(elapsed / 3600)} 小时 ${Math.floor((elapsed % 3600) / 60)} 分钟`;
break;
case "week":
elapsed = (now.getDay() * 24 * 3600) + (now.getHours() * 3600) + (now.getMinutes() * 60) + now.getSeconds();
total = 7 * 24 * 3600;
text = `本周已过去 ${Math.floor(elapsed / (24 * 3600))} 天 ${Math.floor((elapsed % (24 * 3600)) / 3600)} 小时 ${Math.floor((elapsed % 3600) / 60)} 分钟`;
break;
case "month":
const year = now.getFullYear();
const month = now.getMonth() + 1;
const daysInMonth = new Date(year, month, 0).getDate();
elapsed = ((now.getDate() - 1) * 24 * 3600) + (now.getHours() * 3600) + (now.getMinutes() * 60) + now.getSeconds();
total = daysInMonth * 24 * 3600;
text = `本月已过去 ${Math.floor(elapsed / (24 * 3600))} 天 ${Math.floor((elapsed % (24 * 3600)) / 3600)} 小时 ${Math.floor((elapsed % 3600) / 60)} 分钟`;
break;
case "year":
const startOfYear = new Date(now.getFullYear(), 0, 1);
const diff = now - startOfYear;
elapsed = Math.floor(diff / 1000);
const isLeapYear = (new Date(now.getFullYear(), 1, 29).getDate() === 29);
total = (isLeapYear ? 366 : 365) * 24 * 3600;
text = `今年已过去 ${Math.floor(elapsed / (24 * 3600))} 天 ${Math.floor((elapsed % (24 * 3600)) / 3600)} 小时 ${Math.floor((elapsed % 3600) / 60)} 分钟`;
break;
}
const percentage = Math.round((elapsed / total) * 100);
const item = document.getElementById(`countdown-${type}`);
if (item) {
const textElement = item.querySelector(".countdown-text");
const percentageElement = item.querySelector(".countdown-percentage");
const progressBarElement = item.querySelector(".progress-bar-fill");
textElement.textContent = text;
percentageElement.textContent = `${percentage}%`;
progressBarElement.style.width = `${percentage}%`;
progressBarElement.style.backgroundColor = config.colorMap[type];
}
});
}
// 初始化
document.addEventListener("DOMContentLoaded", () => {
// 可以根据需要动态隐藏某些类型的倒计时
// 例如，如果只想显示day和week:
// config.types = ['day', 'week'];
updateCountdown();
setInterval(updateCountdown, 1000 * 60); // 每分钟更新一次
});
测试
本地测试下来应该没什么问题