JavaScript 学習記録 ＃2 Dateオブジェクト

12時間時計にする方法

24時間表記で表示されるのは、getHoursメソッドで取得できる数字をそのまま出力しているためです。
Dateオブジェクトに12時間表記の時間を取得できるメソッドはないため、加工が必要です。

15：13　を　3：13 p.m とするためには・・・？

方法はいくつかあります。

①コードの書き方はこんな感じ

date.js

<script>
    'use strict';
    
    const now = new Date();
    const year = now.getFullYear();
    const month = now.getMonth();
    const date = now.getUTCDate();
    const hour = now.getHours();
    const min = now.getUTCMinutes();
    let ampm = '';
    if(hour < 12){
        ampm = 'a.m.';
    }else{
        ampm = 'a.m.';
    }
    
    const output = `${year}/${month + 1}/${date} ${hour}:${min}`;
    document.getElementById('time').textContent = output;
</script>

②処理の流れ

24時間表記を12時間表記にするには、大きく分けて2つの処理が必要である。

1⃣　現在時刻は午前「a.m.」なのか「p.m.」なのか判別する

プログラムの最初の部分で変数ampmを定義し、空の文字列（文字数が0個の文字列）を代入する。そして、定数hourに保存されている数値が12より小さい、現在時間が0時～11時の場合、変数ampmに「a.m.」を代入する。定数hourの値が12以上の場合は「p.m.」を代入する。

2⃣　0～23の数字を0～11に変換する

定数outputに代入するときには、24時間表記の時間を12で割った余りを計算すれば良い。
　${hour % 12 }

※ 「どう処理すれば良いか」を考えることが大切