【Javascript】時刻を12時間表記にしてみる【ifの使い方】

以前、JavaScriptを使って現在日時の表示についてお話ししました。

【Javascript】年・月・日・時・分・秒を取り出す方法

Javascriptを使って現在日時をそれぞれ書き出してみます。 現在の時間を細かく取得 年～秒を単位ごとで取得 配列を使って曜日を取得 現在の時間を細かく取得 1行で終わるほど...

sunsukeblog.com

2019-01-02 17:29

しかしデフォルトでは24時間表記になってしまうので今回は12時間表記(午前・午後)にしてみます。

if文についての初歩的な使い方なので、JavaScriptを使った簡単な条件分岐についても併せて確認していきましょう。

getHours()の値を取得

まずはgetHours();を使って現在の時間を取得しましょう。

[HTML]

<p>現在は<span id="ampm"></span><span id="hh"></span>:<span id="mm"></span>です。</p>

[JavaScript]

var now = new Date();
var hh = now.getHours();
var mm = now.getMinutes();
document.getElementById('hh').textContent = hh;
document.getElementById('mm').textContent = mm;

時間の表記はできました。しかし24時間表記なのでAM/PMや午前/午後の表記に変えてみます。

ifで13～24時なら表記を変える

そもそも24時間表記なので12～23までの値を0～11で置き換える必要があります。そのためにif文を使って変数hhの値によって<span id=”ampm”>と<span id=”hh”>の中を書き換えていくことが必要です。

午前・午後を書き換える

[JavaScript]

var now = new Date();
var hh = now.getHours();
var mm = now.getMinutes();
if(hh>=12){
  document.getElementById('ampm').textContent = '午後';
}else {
  document.getElementById('ampm').textContent = '午前';
}
document.getElementById('hh').textContent = hh;
document.getElementById('mm').textContent = mm;

変数hh(現在時刻)が12以上である場合は<span id=”ampm”>に『午前』、12未満なら『午前』というテキストを入れていきます。

0～12時に書き換える

基本的には上で説明した手順と同じです。

[JavaScript]

var now = new Date();
var hh = now.getHours();
var mm = now.getMinutes();
if(hh>=12){
  document.getElementById('ampm').textContent = '午後';
  document.getElementById('hh').textContent = hh-12;
}else {
  document.getElementById('hh').textContent = hh;
}
document.getElementById('mm').textContent = mm;

変数hhで現在時刻が24時間表記で取得されているので、変数hhが12以上の場合は変数hhから12を引いた値を<span id=”hh”>のテキストとして代入します。

変数が12未満の場合には変数hhの値はそのまま<span id=”hh”>に代入します。

簡単な事ではあるんですが、プログラムで自動で書き換えるという基本はこんな感じなので練習を積み重ねてきましょう。