【Web】JavaScriptのDateオブジェクトでHTMLに日時を表示させる (Web勉強記 8日目)

投稿日:2020年3月3日
最終更新日:2020年3月3日

ボタンクリックで日時を取得して表示する

前回はおみくじに画像を表示させた。今回は、クリックした時点の日時を取得して、おみくじの結果と一緒に表示したいと思う。

 

JavaScriptのDateオブジェクトを使う

JavaScriptで日時を表示するにはDateオブジェクトを使う。ボタンクリックしたら日時が表示されるようにしたソースコードを載っけておく。

変更点を説明すると、まず以下でtryDayという名前のDateオブジェクトを定義。

 var tryDay = new Date();

このまま表示させると日時だけじゃなくて時間や秒数まで表示されてしまうので、年、月、日を以下のメソッドで取得する。Dateのメソッドについてはこちらが詳しい。ここで、月だけは1月を0として0~11の戻り値で帰ってくるので、+1しているのに注意。

 var year = tryDay.getFullYear();
 var month = tryDay.getMonth() + 1;
 var day = tryDay.getDate();

年、月、日を取得したら、ymdDateという変数を定義して結合する。

 var ymdDate =  “最後におみくじを引いた日:” + year + “年” + month + “月” + day + “日”;

最後に、以下の

 document.getElementById(“date”).textContent = ymdDate;
    (途中略)
 <p id = “date”></p>

でymdDateをhtml内で定義したdateというidのパラグラフに表示させている。これで以下のように実行時間を表示することができた。

また、いつものごとくgithub pagesのindex.htmlに今回の内容を追加して置いた。以下ページの「web_omikuji_time」のリンクから今回の内容が確認できます。

https://wakkyfree.github.io/

 

勉強記まとめ

今までの勉強記は以下にまとめています。初学者の目線で色々つくったり、試してみたりしてるので、興味があればどうぞ。

【Web】HTML/CSS/JavaScriptでおみくじをつくろう日記


投稿者: wakky

映画と旅行が大好きなエンジニア。お酒、ゲーム、読書も好き。

コメントを残す

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください