jQueryでデジタル時計を作る方法

110 回閲覧されました

公開日 : 2024年10月11日
最終更新日 : 2024年10月12日

みなさんこんにちは、jonioです。

今回は時間が変わったら自動的に表示されるデジタル時計をjQueryで作る為のメモになります。

1 見た目
2 HTMLとCSS
3 jQuery

見た目

下記になります。

HTMLとCSS

下記のコードを記述します。

//HTML
<div class="clock-display">
    <h3 id="date-display"></h3>
    <div class="time-display">
        <h1 id="time-display"></h1>
    </div>
</div>


//CSS
.clock-display {
    text-align: center;
    border: 1px solid #ddd;
    padding: 20px;
    margin-bottom: 20px;
}
.time-display h1 {
    font-size: 72px;
    margin: 10px 0;
}

jQuery

下記のコードを記述します。

function updateClock() {
    const now = new Date();
    const hours = now.getHours().toString().padStart(2, '0');
    const minutes = now.getMinutes().toString().padStart(2, '0');
    const date = now.toLocaleDateString('ja-JP', { month: 'numeric', day: 'numeric', weekday: 'short' });

    $('#time-display').text(`${hours}:${minutes}`);
    $('#date-display').text(date);
}

updateClock();

setInterval(updateClock, 1000);

2行目で現在の日時を取得します。

3行目の現在の時間を取得してそれを24時間表記にして文字に変換して最大2桁で表示します。

9時など1桁の場合は09で表示します。

4行目は現在の分の場合です。

時間の時と考え方は同じです。

5行目で現在の日付と曜日を取得しています。

7行目で時間と分を表示して8行目で日付と曜日を表示しています。

11行目はまず画面を表示した時に時刻と日付と曜日を表示する為の記述です。

13行目は1秒ごとに現在の時刻を変化させます、これがあることで時刻が変化すると画面に変化した時刻が表示されます。