22408考研计时器

项目概述

本项目是基于简单的js+html+css静态计时器项目，可用于考研时各学科计时使用。

项目展示

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
<body>
    <div id="grid-container">
        <div class="timer">
            <h1>数二</h1>
            <div class="display" id="display1">00:00:00:00</div>
            <div class="controls">
                <button id="startBtn1" onclick="start(0)">开始</button>
                <button id="stopBtn1" onclick="stop(0)">暂停</button>
                <button id="resetBtn1" onclick="reset(0)">重置</button>
            </div>
        </div>
        <div class="timer">
            <h1>408</h1>
            <div class="display" id="display2">00:00:00:00</div>
            <div class="controls">
                <button id="startBtn2" onclick="start(1)">开始</button>
                <button id="stopBtn2" onclick="stop(1)">暂停</button>
                <button id="resetBtn2" onclick="reset(1)">重置</button>
            </div>
        </div>
        <div class="timer">
            <h1>英二</h1>
            <div class="display" id="display3">00:00:00:00</div>
            <div class="controls">
                <button id="startBtn3" onclick="start(2)">开始</button>
                <button id="stopBtn3" onclick="stop(2)">暂停</button>
                <button id="resetBtn3" onclick="reset(2)">重置</button>
            </div>
        </div>
        <div class="timer">
            <h1>政治</h1>
            <div class="display" id="display4">00:00:00:00</div>
            <div class="controls">
                <button id="startBtn4" onclick="start(3)">开始</button>
                <button id="stopBtn4" onclick="stop(3)">暂停</button>
                <button id="resetBtn4" onclick="reset(3)">重置</button>
            </div>
        </div>
    </div>
</body>

index.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
const displays = [
    document.getElementById("display1"),
    document.getElementById("display2"),
    document.getElementById("display3"),
    document.getElementById("display4")
];

let timers = [null, null, null, null];
let startTimes = [0, 0, 0, 0];
let elapsedTimes = [0, 0, 0, 0];
let isRunning = [false, false, false, false];

function start(index) {
    if (!isRunning[index]) {
        startTimes[index] = Date.now() - elapsedTimes[index];
        timers[index] = setInterval(() => update(index), 10);
        isRunning[index] = true;
    }
}

function stop(index) {
    if (isRunning[index]) {
        clearInterval(timers[index]);
        elapsedTimes[index] = Date.now() - startTimes[index];
        isRunning[index] = false;
    }
}

function reset(index) {
    clearInterval(timers[index]);
    startTimes[index] = 0;
    elapsedTimes[index] = 0;
    isRunning[index] = false;
    displays[index].textContent = '00:00:00:00';
}

function update(index) {
    const currentTime = Date.now();
    elapsedTimes[index] = currentTime - startTimes[index];

    let hours = Math.floor(elapsedTimes[index] / (1000 * 60 * 60));     //Math.floor(...) 用于向下取整，确保得到完整的小时数
    let minutes = Math.floor(elapsedTimes[index] / (1000 * 60) % 60);   //% 60 取模操作获取当前分钟数（在 0 到 59 之间），即当前小时内的分钟数。
    let seconds = Math.floor(elapsedTimes[index] / 1000 % 60);          //% 60 取模操作获取当前秒数（在 0 到 59 之间），即当前分钟内的秒数。
    let milliseconds = Math.floor(elapsedTimes[index] % 1000 / 10);     //%1000 计算出剩余的毫秒数（在 0 到 999 之间）, / 10 将毫秒转换为“十分之一秒”，因为在显示中通常以“分”表示。
    displays[index].textContent = 
        `${String(hours).padStart(2, "0")}:${String(minutes).padStart(2, "0")}:${String(seconds).padStart(2, "0")}:${String(milliseconds).padStart(2, "0")}`;   //.padStart(2, "0")方法确保字符串的长度至少为 2 位。如果小时数少于 2 位（例如 1），前面会用 "0" 填充，结果为 "01"。
}

index.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
67
68
69
70
71
72
73
body {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: rgb(239, 198, 198);
}

#grid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2列 */
    grid-template-rows: repeat(2, 1fr); /* 2行 */
    gap: 20px; /* 每个格子之间的间隙 */
    width: 80%; /* 设置容器的宽度 */
    margin-top: 20px;
    background-color: black;
}

.timer {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px;
    border: 5px solid;
    border-radius: 20px;
    background-color: white;
}

.display {
    font-size: 5rem;
    font-family: monospace;
    font-weight: bold;
    color: hsl(0, 0%, 30%);
    text-shadow: 2px 2px 2px hsl(0, 0%, 0%, 0.75);
    margin-bottom: 25px;
}

.controls button {
    font-size: 1.5rem;
    font-weight: bold;
    padding: 10px 20px;
    margin: 5px;
    min-width: 125px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    color: white;
    transition: background-color 0.5s ease;
}

#startBtn1, #startBtn2, #startBtn3, #startBtn4 {
    background-color: hsl(115, 100%, 40%);
}

#startBtn1:hover, #startBtn2:hover, #startBtn3:hover, #startBtn4:hover {
    background-color: hsl(115, 100%, 30%);
}

#stopBtn1, #stopBtn2, #stopBtn3, #stopBtn4 {
    background-color: hsl(10, 90%, 50%);
}

#stopBtn1:hover, #stopBtn2:hover, #stopBtn3:hover, #stopBtn4:hover {
    background-color: hsl(10, 90%, 40%);
}

#resetBtn1, #resetBtn2, #resetBtn3, #resetBtn4 {
    background-color: hsl(205, 90%, 60%);
}

#resetBtn1:hover, #resetBtn2:hover, #resetBtn3:hover, #resetBtn4:hover {
    background-color: hsl(205, 90%, 50%);
}

感谢您的支持 | Thank you for supporting
22408考研计时器
http://example.com/2024/10/10/project1/
作者
Eli Bi
发布于
2024年10月10日
更新于
2025年10月17日
许可协议