JS 時間取得と加工

JavaScriptではいろんな時間の情報を使えるよう整っています。改めて整理してみました。

まずはどんな時間を扱うことが多いのか。

年月日の形式ではなくて、時差について二つだけ。

協定世界時（UTC）

Mon, 20 May 2019 09:33:22 GMT

グリニッジ標準時（GMT）

Mon, 20 May 2019 09:33:22 GMT

上記二つはJSでもほぼ同義語のようです。

Japan Standard Time (JST)

2019/5/20 18:33:22

JSTとは日本の時間のこと。上記のGMTより＋９時間の時差らしいです。

RFC 2822 形式

Mon, 20 May 2019 18:36:54 +0900

こんな書き方はこういう形式というらしいです。

ユニックスタイム（unixtime）

1558400303080

1970年1月1日0時0分0秒からとにかく、数えた数。

ISO 8601 国際規格

基本形式：2019-05-13T23:24:41Z

基本形式（時差あり）：20190518T182831+0900

拡張形式：2019-05-18T18:28:31+09:00

ウェブのやりとりでよく見かける形式。

ではJSの年月日を取得する記述を実装します。

これを出力するためには以下のように書くことができます。

    dateobj = new Date();
    //日付オブジェクトを作る

    //Dateオブジェクトで可能になるメソッド
    var yyyy = dateobj.getFullYear(); //年を取得

    var mo = dateobj.getMonth() + 1;
    //月は０から返ってくるので１を足す

    var dd = dateobj.getDate(); //日を取得

    var week_num = dateobj.getDay(); //曜日の番号がとれる 0から6
    var week_arr = ["日", "月", "火", "水", "木", "金", "土"];
    var w = week_arr[week_num]; //配列を利用して数字を曜日に変換する

    var hh = dateobj.getHours(); //時間を取得
    var mm = dateobj.getMinutes(); //分を取得
    var ss = dateobj.getSeconds(); //秒を取得
    var ms = dateobj.getMilliseconds(); //ミリ秒を取得

    //出力
    document.write(yyyy + "年" + mo + "月" + dd + "日" + w + "曜日" + hh + "時" + mm + "分" + ss + "秒" + ms + "ミリ秒");

Date()で日付のオブジェクトを作ると、今のGMTを取れます。

以下の記述をJSに書くとに取り出した日付を変換することができます。

<script>
    
    today = new Date();
    //日付オブジェクトを作る

    document.write(today); //そのまま表示すると現在の日本標準時が出る
    document.write("<br>");
    
    var a = today.toLocaleString(); //日本なんので日本におなじみの形式になる
    document.write(a);
    document.write("<br>");
    
    var b = today.toGMTString(); //GMTに変換　つまり日本の９時間前
    document.write(b);
    document.write("<br>");
    
    var c = today.toUTCString(); //UTCに変換だけどGMTとほぼ同じらしい
    document.write(c);


</script>

実行するとこうなります。

今の日時でなくても、Dateオブジェクトで加工することができます。

<script>
    // 好きな年月日をカンマ区切りで代入ができる (2019年1月5日3時10分30秒) 
    var dateobj = new Date( 2019, 0, 5, 3, 10, 30 ) ; //月は０からスタート
    document.write(dateobj);
    document.write("<br>");

    // RFC 2822 形式のまま代入もできる
    my_gmt = 'Mon, 20 May 2019 09:21:05 GMT';
    dateobj = new Date(my_gmt);
    document.write(dateobj);
    document.write("<br>");
    document.write("<hr>");

    // ISO 8601 形式も代入できる
    e = '2019-05-13T23:24:41Z';
    f = new Date(e);

    document.write(f); //RFC 2822 形式で表示　時差を表示してくれる
    document.write("<br>");

    document.write(f.toLocaleString()); //日本の時間を表示
</script>

このようにすることでいろんな形式の日時データを解釈、加工することができます。

次はユニックスタイムについて。

<script>
    // unixtime
    dateobj = new Date();
    var ut = dateobj.getTime() ;
    document.write(ut);
    document.write("<br>");

    dateobj = new Date(ut); //unixtimeも代入可能
    document.write(dateobj.toLocaleString());
    document.write("<br>");
    document.write("<hr>");
</script>

ただの数列ですが、しっかり日時情報を持っています。

最後に時間を使ったビジュアルのサンプルです。

時間の数値を使って砂時計を作ってみました。

描画のタイミングの秒を使って位置を指定しています。

更新をするたびに位置が変わります。（リアルタイムには動きません）

dateobj = new Date();
var hh = dateobj.getHours(); //時間を取得
var mm = dateobj.getMinutes(); //分を取得
var ss = dateobj.getSeconds(); //秒を取得

ss_size = 100/60*ss;
document.write('<div id="demo_cal"><div style="top:'+ss_size+'px;"></div></div>');

ss_size2 = 100-100/60*ss;
document.write('<div id="demo_cal2"><div style="top:'+ss_size2+'px;"></div></div>');
document.write(ss);

時間は数字ですので、位置や長さ、角度などに使えます。

そう考えると「時計」ってすごいUIなんだなー、と改めて思いました。

CSSは参考まで。

<style>
#demo_cal{
    background-color:#CCC;
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;
    width:100px;
    height: 100px;
    overflow-y: hidden;
    position: relative;
}
#demo_cal div{
    background-color:#C55;
    width:100px;
    height: 100px;
    position: absolute;
}
#demo_cal2{
    background-color:#CCC;
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
    width:100px;
    height: 100px;
    overflow-y: hidden;
    position: relative;
}
#demo_cal2 div{
    background-color:#C55;
    width:100px;
    height: 100px;
    position: absolute;
}
</style>