clock.github.io/clock.html at main · hatofly/clock.github.io · 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
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>digital-clock</title>
    <style>
        body {
            font-family: 'Menlo', monospace; /* 全体をMenloフォントに変更 */
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column; /* 日付を時計の上に配置 */
            height: 100vh;
            margin: 0;
            background-color: #000; /* 黒い背景 */
        }
        #date {
            font-size: 4vw; /* 日付のフォントサイズを時計の半分に設定 */
            color: #fff;
            font-family: 'Menlo', monospace; /* Menloフォントを適用 */
            margin-bottom: 1vw;
        }
        #clock {
            font-size: 10vw; /* 時計のフォントサイズを設定 */
            color: #fff;
            font-family: 'Menlo', monospace; /* Menloフォントを適用 */
            letter-spacing: 1vw; /* 文字の間隔もビュー幅に基づいて調整 */
            width: 90vw; /* 幅を90%に設定 */
            text-align: center; /* テキストを中央揃え */
            white-space: nowrap; /* テキストが折り返されないように */
        }
    </style>
</head>
<body>

<div id="date">0000/00/00 Err</div>
<div id="clock">00:00:00.00</div>

<script>
    function updateClock() {
        const now = new Date();

        // 日付を0埋めで取得
        const year = now.getFullYear();
        const month = String(now.getMonth() + 1).padStart(2, '0'); // 月は0が1月なので+1
        const day = String(now.getDate()).padStart(2, '0');

        // 曜日を取得
        const weekdays = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
        const dayOfWeek = weekdays[now.getDay()];

        // 時刻を0埋めで取得
        const hours = String(now.getHours()).padStart(2, '0');
        const minutes = String(now.getMinutes()).padStart(2, '0');
        const seconds = String(now.getSeconds()).padStart(2, '0');
        const milliseconds = String(Math.floor(now.getMilliseconds() / 10)).padStart(2, '0'); // 10ms単位に変換して0埋め

        // 日付と時刻の文字列を作成
        const dateString = `${year}/${month}/${day} ${dayOfWeek}`;
        const timeString = `${hours}:${minutes}:${seconds}.${milliseconds}`;

        // HTMLに反映
        document.getElementById('date').textContent = dateString;
        document.getElementById('clock').textContent = timeString;
    }

    setInterval(updateClock, 10);  // 10ミリ秒ごとに更新
</script>

</body>
</html>