clock/index.js at main · desimaru/clock · 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
const body = document.body,
    h1 = document.querySelector("h1"),
    [
        ,
        isLocalTime,
        isShowYear,
        isShowMS,
        is24hour,
        color,
        backgroundColor,
        fontSize,
    ] = document.getElementsByTagName("input");
function reflesh() {
    const dateTime = new Date();
    const utc = isLocalTime.checked ? "" : "UTC";
    let time = "";
    if (isShowYear.checked) {
        // `(年)/(月)/(日) (曜日)
        time = `${[
            dateTime[`get${utc}FullYear`](),
            (dateTime[`get${utc}Month`]() + 1).toString().padStart(2, "0"),
            dateTime[`get${utc}Date`]().toString().padStart(2, "0"),
        ].join("/")} ${`${"日月火水木金土"[dateTime[`get${utc}Day`]()]}曜日`}`;
    }
    time += [
        (is24hour.checked
            ? dateTime[`get${utc}Hours`]()
            : dateTime[`get${utc}Hours`]() % 12
        ).toString().padStart(2, "0"),
        dateTime[`get${utc}Minutes`]().toString().padStart(2, "0"),
        dateTime[`get${utc}Seconds`]().toString().padStart(2, "0"),
    ].join(":");
    if (isShowMS.checked) {
        time += `.${dateTime[`get${utc}Milliseconds`]().toString().padStart(3, "0")}`;
    }
    if (!is24hour.checked) {
        time += ` ${dateTime[`get${utc}Hours`]() < 12 ? "AM" : "PM"}`;
    }
    if (h1.textContent !== time) {
        h1.textContent = time;
    }
    if (h1.style.fontSize !== `${fontSize}px`) {
        h1.style.fontSize = `${fontSize.value}px`;
    }
    if (body.style.color !== color.value) {
        body.style.color = color.value;
    }
    if (body.style.backgroundColor !== backgroundColor.value) {
        body.style.backgroundColor = backgroundColor.value;
    }
    requestAnimationFrame(reflesh);
}
requestAnimationFrame(reflesh);