JavaScript【 Date 】4 ～ setIntervalでリアルタイム表示

今回は、JavaScriptのDateオブジェクトを使用して取得した現在時刻を、リアルタイムで表示する方法を紹介します。

なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3％で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。

1. 現在時刻の取得

　
現在日時（システム日時）は、Dateオブジェクトを使用して次のように取得します。

// 現在日時データを取得
let dt = new Date();

// 現在日時の値を取得
// 年
let yea = dt.getFullYear();
// 月
let mon = dt.getMonth() + 1;
// 日
let day = dt.getDate();
// 時
let hou = dt.getHours();
// 分
let min = dt.getMinutes();
// 秒
let sec = dt.getSeconds();

ページを読み込んだ時点の現在時刻の表示は、次のようになります。

　
ソースコードは次の通りです。

<script type="text/javascript">
window.addEventListener('DOMContentLoaded', function(){

    // 一桁の数字を0埋め
    let fm = function(num) {
        num += "";
        if (num.length == 1) {
            num = "0" + num;
        }
        return num;     
    };

    let dt = new Date();
    let yea = dt.getFullYear();
    let mon = fm(dt.getMonth() + 1);
    let day = fm(dt.getDate());
    let hou = fm(dt.getHours());
    let min = fm(dt.getMinutes());
    let sec = fm(dt.getSeconds());

    document.getElementById("dat").value = yea + "/" + mon + "/" + day + "　"
                                            + hou + ":" + min + ":" + sec;
});
</script>

<div style="background-color : #CCC; padding : 20px 10px 1px;">
    <input type="text" id="dat">
</div>

▲目次へ戻る

2. setIntervalメソッド

　
setIntervalメソッドは、一定の間隔を空けて、関数を繰り返し呼び出すメソッドです。

次のように記述します。

setInterval( 関数, 処理間隔 );

処理間隔は、ミリ秒で指定します。

このようにsetIntervalメソッドを記述すると、第一引数で指定した関数が、第二引数で指定した間隔で実行されます。
　

setIntervalメソッドを使用して、1秒毎に現在日時を取得して表示してみます。

　
ソースコードは次の通りです。

<script type="text/javascript">
function dispDate(){

    // 一桁の数字を0埋め
    let fm = function(num) {
        num += "";
        if (num.length == 1) {
            num = "0" + num;
        }
        return num;     
    };

    let dt = new Date();
    let yea = dt.getFullYear();
    let mon = fm(dt.getMonth() + 1);
    let day = fm(dt.getDate());
    let hou = fm(dt.getHours());
    let min = fm(dt.getMinutes());
    let sec = fm(dt.getSeconds());

    document.getElementById("dat").value = yea + "/" + mon + "/" + day + "　"
                                            + hou + ":" + min + ":" + sec;
}

setInterval("dispDate()",1000);
</script>

<div style="background-color : #CCC; padding : 20px 10px 1px;">
    <input type="text" id="dat">
</div>

現在日時を取得して表示する関数dispDateと、処理間隔1000（ミリ秒）を「setInterval(“dispDate()”,1000);」と指定して、1秒（1000ミリ秒）毎に現在日時を取得して表示しています。

▲目次へ戻る

3. setTimeoutメソッド

　
タイマー関連のメソッドとして、setIntervalメソッドとよく並べられるメソッドに、setTimeoutメソッドがあります。

setTimeoutメソッドは、特定時間の経過後に、処理を実行するメソッドです。

次のように記述します。

setTimeout( 関数, 時間 );

時間は、ミリ秒で指定します。

このようにsetTimeoutメソッドを記述すると、第一引数で指定した関数が、第二引数で指定した時間（ミリ秒）経過後に実行されます。

setIntervalメソッドと異なり、setTimeoutメソッドは、処理を一度だけ実行します。
　

setTimeoutメソッドを使用して、3秒後にアラートを表示してみます。
STARTボタンをクリックして下さい。

　
ソースコードは次の通りです。

<script type="text/javascript">
function startTmr() {
    setTimeout("dispMsg()", 3000);
}

function dispMsg() {
    alert("ＲＥＭＩＮＤＥＲ！");
}
</script>

<input type="button" value="START" onClick="startTmr()">

アラートを表示する関数dispMsgと、経過時間3000（ミリ秒）を「setTimeout(“dispMsg()”, 3000);」と指定して、STARTボタンをクリックした 3秒（3000ミリ秒）後にアラートを表示させています。

尚、カウントを分かりやすくするために、現在日時を表示していますが、その部分のソースコードは、2. setIntervalメソッドのサンプルと同じです。

▲目次へ戻る