JavaScriptを使って、日時をわかりやすく表示

わかりやすく日時を表示する

現在日時：

HTML、Javascript <body>
<section> <p>現在日時：<span id=”time”></span></p> </section>

<script>
var now = new Date();
var year = now.getFullYear();
var month = now.getMonth();
var date = now.getDate();
var hour = now.getHours();
var min = now.getMinutes();

var output = year + ‘/’ + (month + 1) + ‘/’ + date + ‘ ‘ + hour + ‘:’ + min;
document.getElementById(‘time’).textContent = output;
</script>
</body>

簡単な解説

Dateオブジェクトは初期化する必要があり、newはオブジェクトを初期化するキーワードとなっています。そのためnew Date();として初期化してから使います。

月を取得するgetMonthでは「実際の月の-1」の数字が取得されます。1月なら「0」、2月なら「1」となります。ですのでここでは（month + 1）として１を足す必要があります。

12時間表記にする

現在日時：

HTML、Javascript <body>
<section> <p>現在日時：<span id=”ampm”></span></p> </section>

<script>
var now = new Date();
var year = now.getFullYear();
var month = now.getMonth();
var date = now.getDate();
var hour = now.getHours();
var min = now.getMinutes();
var ampm = ”;
if(hour < 12 ){
ampm = ‘a.m.’;
} else {
ampm = ‘p.m.’;
}

var output = year + ‘/’ + (month + 1) + ‘/’ + date + ‘ ‘ + (hour % 12) + ‘:’ + min + ampm;
document.getElementById(‘ampm’).textContent = output;
</script>
</body>

簡単な解説

var ampm = '' にて変数ampmを定義して準備しています。

変数hourに保存されている数値が12より小さい、つまり現在時刻が0時～11時の場合、変数ampmに「a.m」を代入。変数hourの値が12以上、つまり現在時刻が12時から23時の場合は「p.m」を代入します。

0～23の数宇を0～11に変換する部分は、(hour % 12 )にて24時間表記の時間を12で割った「余り」を計算すればいいですね。

この本から引用、参考にして学び、完成させることができました。しかし、ここではプログラミング初心者の私が詳しく解説することは、おこがましく、難しく出来ません（ToT）
その点、この本では丁寧な解説が載っていますので、解説とともにコードを書き、完成させればより深く学ぶことができます(^.^)、実際、初心者の私でもわかりやすかったです。身に付け消えないスキルが3,000円弱ならコスパよく、買っておいてよかったと満足してます。

わからないことはプロフェッショナルから学ぶのが一番

キャリアアップに必要なスキルを取得しよう。

オンラインで受講ができるスクールですので、全国どこからでも。