ExamCountdown/main.html at master · SmallSun697/ExamCountdown · GitHub

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
<!DOCTYPE html>
<html lang="zh-tw">
<head>
    <meta charset="UTF-8">
    <title>統測倒數計時</title>
    <link rel="stylesheet" href="styles/style.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
          rel="stylesheet">
    <style>
        .row {
            width: 100%;
            height: 100%;
        }

        .div {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 50%;
        }

        .notepad {
            font-size: 3vw;
        }

        #countdown {
            font-size: 9vw;
        }
    </style>
</head>
<body>
<div class="row">
    <div class="div notepad" style="display: flex; flex-direction: column">
    </div>
    <div class="div">
        <p id="countdown"></p>
    </div>
</div>
<script>
    const notepad = document.querySelector(".notepad");
    const notes = JSON.parse(localStorage.getItem("database")).notepad;
    setInterval(() => {
        notepad.innerHTML = "";
        for (let i = 0; i < notes.length; i++) {
            const noteContainer = document.createElement("div");
            noteContainer.style.width = "78vw";
            noteContainer.style.display = "flex";
            noteContainer.style.justifyContent = "space-between";
            const noteText = document.createElement("span");
            noteText.textContent = notes[i].note;
            const noteDate = document.createElement("span");
            const targetDate = new Date(notes[i].date);
            const now = new Date();
            const diffMs = targetDate - now;
            if (diffMs > 0) {
                const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
                const diffHours = Math.floor((diffMs % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                const diffMinutes = Math.floor((diffMs % (1000 * 60 * 60)) / (1000 * 60));
                const diffSeconds = Math.floor((diffMs % (1000 * 60)) / 1000);
                if (diffDays > 0) {
                    noteDate.textContent = `${diffDays}天`;
                } else if (diffHours > 0) {
                    noteDate.textContent = `${diffHours}小時`;
                } else if (diffMinutes > 0) {
                    noteDate.textContent = `${diffMinutes}分鐘`;
                } else {
                    noteDate.textContent = `${diffSeconds}秒`;
                }
            } else {
                noteText.style.textDecoration = "line-through";
                noteDate.textContent = "";
            }
            noteContainer.appendChild(noteText);
            noteContainer.appendChild(noteDate);
            notepad.appendChild(noteContainer);
        }
    }, 200);

    const endTime = new Date("2025-04-26T10:20:00.000").getTime();
    const interval = setInterval(() => {
        const now = new Date().getTime();
        const timeRemaining = endTime - now;
        const days = Math.floor(timeRemaining / (1000 * 60 * 60 * 24));
        const hours = Math.floor((timeRemaining % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        const minutes = Math.floor((timeRemaining % (1000 * 60 * 60)) / (1000 * 60));
        const seconds = Math.floor((timeRemaining % (1000 * 60)) / 1000);
        const milliseconds = Math.floor(timeRemaining % 1000);
        let formattedTime = "";
        if (days > 0) {
            formattedTime += `${days}天 `;
        }
        if (hours > 0 || days > 0) {
            formattedTime += `${String(hours).padStart(2, '0')}:`;
        }
        if (minutes > 0 || hours > 0 || days > 0) {
            formattedTime += `${String(minutes).padStart(2, '0')}:`;
        }
        formattedTime += `${String(seconds).padStart(2, '0')}.${String(milliseconds).padStart(3, '0')}`;
        if (timeRemaining <= 0) {
            clearInterval(interval);
            formattedTime = "考試開始";
        }
        document.getElementById("countdown").innerText = formattedTime.toString();
    }, 9);
</script>
<script src="scripts/script.js"></script>
</body>
</html>