[JS] JavaScriptでデジタル時計を作る

JavaScript を使って時計を作ってみます。全コードが知りたい方は、最後に載せているコードをご利用ください。

JavaScript 部分から作成していきます。現在日時を表示に合わせてフォーマッティングしていきます。日時は Date で取得することができます。Date で取得した値を利用し、表示したい形式に合わせていきます。値を更新してくために100ミリ秒ごとに更新を繰り返すようにしていきます。

function clockUpdate() {
    // 現在の時刻
    const now = new Date();
    // 年
    const year = now.getFullYear()
    // 月
    const month = String(now.getMonth()+1).padStart(2, "0")
    // 日
    const date = String(now.getDate()).padStart(2, "0")
    // 曜日
    const day = now.getDay()
    // 時（ゼロ埋めして00にします）
    const hour = String(now.getHours()).padStart(2, "0")
    // 分（ゼロ埋めして00にします）
    const minute = String(now.getMinutes()).padStart(2, "0")
    // 秒（ゼロ埋めして00にします）
    const second = String(now.getSeconds()).padStart(2, "0")

    // 曜日の一覧
    const dayname = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'];
    // 日付「年-月-日 (曜日)」のテキストを作ります
    const strDate = `${year}-${month}-${date} (${dayname[day]})`;
    // 時間「時:分:秒」のテキストを作ります
    const strTime = `${hour}:${minute}:${second}`;

    // IDがClockDateの値を日付にします
    const clockDate = document.getElementById("clockDate");
    clockDate.textContent = strDate;

    // IDがClockTimeの値を時間にします
    const clockTime = document.getElementById("clockTime");
    clockTime.textContent = strTime;
}

前記で作った関数（funciton）である clockUpdate を 100ミリ秒ごとに実行します。

window.addEventListener('DOMContentLoaded', function(){
    setInterval(() => {
        clockUpdate()
    }, 100);
});

HTML部分です。日付と時間を表示する部分をdivで作成しています。

<div style="text-align: center; width: 100%;">
    <div id="clockDate" style="font-size:20px"></div>
    <div id="clockTime" style="font-size:40px"></div>
</div>

全コードです。Google Fonts を利用して見た目を調整しています。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Clock</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Mono&display=swap" rel="stylesheet">
</head>
<body>
<div style="text-align: center; width: 100%;">
    <div id="clockDate" style="font-size:20px"></div>
    <div id="clockTime" style="font-size:40px"></div>
</div>
<script>
    function clockUpdate() {
        const now = new Date();
        const year = now.getFullYear()
        const month = String(now.getMonth()+1).padStart(2, "0")
        const date = String(now.getDate()).padStart(2, "0")
        const day = now.getDay()
        const hour = String(now.getHours()).padStart(2, "0")
        const minute = String(now.getMinutes()).padStart(2, "0")
        const second = String(now.getSeconds()).padStart(2, "0")

        const dayname = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'];
        const strDate = `${year}-${month}-${date} (${dayname[day]})`;
        const strTime = `${hour}:${minute}:${second}`;
        const clockDate = document.getElementById("clockDate");
        clockDate.textContent = strDate;
        const clockTime = document.getElementById("clockTime");
        clockTime.textContent = strTime;
    }
    window.addEventListener('DOMContentLoaded', function(){
        setInterval(() => {
            clockUpdate()
        }, 100);
    });
</script>
</body>
</html>

JavaScriptJavaScript

Posted by kidatti