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

colmun_main7445

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

目次

 
1.現在時刻の取得
2.setIntervalメソッド
3.setTimeoutメソッド

 

1.現在時刻の取得

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

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

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

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

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

<script type="text/javascript">
<!--
window.onload = function(){

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

    var dt = new Date();
    var yea = dt.getFullYear();
    var mon = fm(dt.getMonth() + 1);
    var day = fm(dt.getDate());
    var hou = fm(dt.getHours());
    var min = fm(dt.getMinutes());
    var 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埋め
    var fm = function(num) {
        num += "";
        if (num.length == 1) {
            num = "0" + num;
        }
        return num;     
    };

    var dt = new Date();
    var yea = dt.getFullYear();
    var mon = fm(dt.getMonth() + 1);
    var day = fm(dt.getDate());
    var hou = fm(dt.getHours());
    var min = fm(dt.getMinutes());
    var 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("REMINDER!");
}
// -->
</script>

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

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

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

▲目次へ戻る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です