ITコラム

colmun_main7445

JavaScript

2017.11.06

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

今回は、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メソッドのサンプルと同じです。

▲目次へ戻る

SHARE

最新記事

IMG_004

卒業生インタビュー

2019.08.20

【卒業生の声:渡邉さん】宮城の大学とプログラマカレッジへ通学を両立!限られた時間を有効活用し、希望するWEB系の会社へ内定。

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 某WEB系会社 プログラマカレッジ卒業生の渡邉さんにお話しをお伺いしました! 目次 新卒採用の切符を捨て、アイデアを形にできる仕事を目指す 質問が […]

続きを見る

DSC_3661

卒業生インタビュー

2019.08.16

【卒業生の声:前田さん】大学中退の未経験エンジニアが4社から内定獲得!初めての就活を成功させた秘訣とは?

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 株式会社リヴァンプ プログラマカレッジ卒業生のマエダさん(23歳)にお話しをお伺いしました! 目次 勉強に興味が持てなくて大学中退 就職できるか不 […]

続きを見る

DSC_0077

卒業生インタビュー

2019.08.08

【卒業生の声:オチアイさん】高校教師からプログラマーへ転身!最初の2ヶ月は理解に苦しむ日々。楽しめるまでに至った秘訣とは?

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 プライムソリューションズ株式会社 プログラマカレッジ卒業生のオチアイさんにお話しをお伺いしました! 目次 大学院卒業後は高校教師に そこから思い切 […]

続きを見る

無料相談する

INTERNOUS,inc. All rights reserved.