jsで現在時間を取得してjQueryで画面に表示する

2023-02-17

js、jQueryで現在時間を画面に表示

使用するのはjavascriptのdateオブジェクト、jQueryです。
ソース内にコメントアウトで簡単に解説を記述しています。

HTML

簡単にをモットーにしているため今回はCSSなしでスタイルはあてていません。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://code.jquery.com/jquery-3.6.3.js" integrity="sha256-nQLuAZGRRcILA+6dMBOvcRh5Pe310sBpanc6+QBmyVM=" crossorigin="anonymous"></script>
    <title>Document</title>
    <!-- javascriptファイル読み込み -->
    <script src="nowtime.js"></script>
</head>
<body>
    <!-- id「now」のspanタグ内に時間を表示します -->
    <div>現在時間は<span id="now"></span>です</div>
</body>
</html>

javascript、jQuery

現在時間を取得する関数をjavascriptで作り(自作関数)、jQueryでHTMLに現在時間を渡します。

//  nowtime.js
$(function(){
    let now = '';           //  現在時間を格納

    //  初期表示
    now = getNowTime();     //  現在時間を取得する関数から帰ってきた値を変数.nowに格納
    $("#now").text(now);    //  htmlnのid「now」のタグに変数.nowを渡す

    //  setIntervalを使って1000ミリ秒毎にfunction内の処理を実行する
    setInterval(function(){
        now = getNowTime();
        $("#now").text(now);
    }, 1000);
    
});

function getNowTime(){
    let date   = '';        //  インスタンス化に使用
    let hour   = '';        //  時間を格納
    let minute = '';        //  分を格納
    let second = '';        //  秒を格納
    let now    = '';        //  結合結果を格納

    // dateオブジェクトをインスタンス化
    date   = new Date();

    // 時、分、秒を取得して各変数に格納
    hour   = date.getHours();
    minute = date.getMinutes();
    second = date.getSeconds();

    // 取得した数値が10未満の場合先頭に0を付け足す(ここは自由)
    if(hour < 10){
        hour = '0' + hour;
    }
    if(minute < 10){
        minute = '0' + minute;
    }
    if(second < 10){
        second = '0' + second;
    }

    // 結合させて変数.nowに格納
    now = hour + ':' + minute + ':' + second;

    // 変数.nowを返す
    return now;
}