# 前言

今天逛博客发现了一个很好看的日期进度条的小插件，但是是 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); // 每分钟更新一次
});

# 测试

本地测试下来应该没什么问题