JavaScript【 Date 】2 ~ 色々な日付の計算

Flight information, arrival and departure board at the airport

JavaScriptのDateオブジェクトを使うと、特定期間の日数計算など、日付や時刻に関する色々な処理を行うことができます。
今回は、Dateオブジェクトを使用して行う様々な日付計算について紹介します。

目次

 
1.日時の加算と減算
2.カウントダウン
3.時差を計算

 

1.日時の加算と減算

 
日時を加算する場合は、Dateオブジェクトのメソッドを次のように使用します。

//現在日時(システム日時)
var dt = new Date();

//1年後
dt.setFullYear(dt.getFullYear() + 1);

//3か月後
dt.setMonth(dt.getMonth() + 3);

//10日後
dt.setDate(dt.getDate() + 10);

//6時間後
dt.setHours(dt.getHours() + 6);

//15分後
dt.setMinutes(dt.getMinutes() + 15);

//30秒後
dt.setSeconds(dt.getSeconds() + 30);

日時を減算する場合も同様です。

//現在日時(システム日時)
var dt = new Date();

//2年前
dt.setFullYear(dt.getFullYear() – 2);

//5か月前
dt.setMonth(dt.getMonth() – 5);

//3日前
dt.setDate(dt.getDate() – 3);

//8時間前
dt.setHours(dt.getHours() – 8);

//40分前
dt.setMinutes(dt.getMinutes() – 40);

//55秒前
dt.setSeconds(dt.getSeconds() – 55);

 
次のように、日にちを加算(減算)した結果、月や年が変わる場合でも、問題なく処理されます。

var dt = new Date(2017, 11, 27);

var str = dt.getFullYear() + "年"
    + (dt.getMonth() + 1) + "月"
    + dt.getDate() + "日の10日後は、";

dt.setDate(dt.getDate() + 10);

var str2 = dt.getFullYear() + "年"
    + (dt.getMonth() + 1) + "月"
    + dt.getDate() + "日です";

上記の変数 str と 変数 str2 を合わせて出力すると、次のように表示されます。

 
「dt.setDate(dt.getDate() + 10);」の記述の後は、変数 dt のデータ自体が10日後に変更されるので、上のサンプルのように 出力内容に変更前後双方のデータを使用する場合は、「dt.setDate(dt.getDate() + 10);」の位置に注意する必要があります。

後々まで元の日時データを使用する場合は、「var dt = new Date(2017, 11, 27);」と同じ定義の変数を複数用意した方が読みやすいソースコードとなります。

▲目次へ戻る

2.カウントダウン

 
Dateオブジェクトを使用して、年明けまでのカウントダウン日数を表示します。
表示ボタンをクリックしてみて下さい。

  

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

<script type="text/javascript">
<!--
function dispAry() {
    var dt = new Date();
    var dt2= new Date((dt.getFullYear() + 1) + "/1/1");

    var day = Math.ceil((dt2-dt)/(60*60*24*1000));

    document.getElementById("dat").value = "来年まであと" + day + "日!";
}
//-->
</script>

<div style="background-color : #CCC; padding : 20px 20px 1px;">
    <form>
        <div style="display:inline-flex;">
           <input type="text" id="dat"> 
            <input type="button" value="表示" onClick="dispAry()">
        </div>
    </form>
</div>

「 dt = new Date(); 」として、現在日時(システム日時)のデータを変数 dt に代入して、
「 dt2= new Date((dt.getFullYear() + 1) + “/1/1”) 」として来年の1月1日の日時データを変数 dt2 に代入しています。

そして、「 Math.ceil((dt2-dt)/(60*60*24*1000)) 」として、変数 dt2 と変数 dt との差を、ミリ秒から日にちに換算しています。
Math.ceilメソッドは、引数に指定した値の切り上げ値を返す関数です。

▲目次へ戻る

3.時差を計算

 
DateオブジェクトのgetTimezoneOffsetメソッドを使うと、グリニッジ標準時との時差を取得することができます。
(Dateオブジェクトのメソッドについては、Dateオブジェクトのメソッド一覧をご参照下さい。)

var jisa = (new Date()).getTimezoneOffset();

getTimezoneOffsetメソッドは、世界協定時間(グリニッジ標準時)との時差を返すメソッドで、「 分( minute )」の単位で値が返ります。
 
 
今度は、グリニッジ標準時との時差を予め用意して、海外の都市の時刻を計算します。
表示ボタンをクリックしてみて下さい。

 
 




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

<script type="text/javascript">
<!--
function dispDate()
{
    //グリニッジ標準時
    var gt = (new Date()).getTime() + (new Date()).getTimezoneOffset()*60*1000;

    //時差を加減して、各日付データ取得
    var dt_j=new Date(gt+9*60*60*1000);  //日本
    var dt_p=new Date(gt+1*60*60*1000);  //パリ
    var dt_n=new Date(gt-4*60*60*1000);  //ニューヨーク
    var dt_h=new Date(gt-10*60*60*1000); //ハワイ

    //表示内容
    var str_j = dt_j.getFullYear() + "年"
                    + (dt_j.getMonth()+1) + "月"
                    + dt_j.getDate() + "日 "
                    + dt_j.getHours() + "時"
                    + dt_j.getMinutes() + "分";

    var str_p = dt_p.getFullYear() + "年"
                    + (dt_p.getMonth()+1) + "月"
                    + dt_p.getDate() + "日 "
                    + dt_p.getHours() + "時"
                    + dt_p.getMinutes() + "分";

    var str_n = dt_n.getFullYear() + "年"
                    + (dt_n.getMonth()+1) + "月"
                    + dt_n.getDate() + "日 "
                    + dt_n.getHours() + "時"
                    + dt_n.getMinutes() + "分";

    var str_h = dt_h.getFullYear() + "年"
                    + (dt_h.getMonth()+1) + "月"
                    + dt_h.getDate() + "日 "
                    + dt_h.getHours() + "時"
                    + dt_h.getMinutes() + "分";

    document.getElementById("dat_j").value += str_j;
    document.getElementById("dat_p").value += str_p;
    document.getElementById("dat_n").value += str_n;
    document.getElementById("dat_h").value += str_h;

}
//-->
</script>

<div style="background-color : #CCC; padding : 20px 20px 1px;">
    <form>
        <input type="button" value="表示" onClick="dispDate()"> 
 
        <input type="text" id="dat_j" value="    日本 : ">
        <input type="text" id="dat_p" value="    パリ : ">
        <input type="text" id="dat_n" value="ニューヨーク : ">
        <input type="text" id="dat_h" value="   ハワイ : ">
    </form>
</div>

▲目次へ戻る

コメントを残す

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