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

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

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

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

	<!DOCTYPE html>
	<html>
	<head>
	<link rel = "stylesheet" href = "omikuji_element_center.css"/>
	<script>
	function tryFortune() {
	var resultInt = Math.floor(Math.random () * 7);
	var tryDay = new Date();
	var year = tryDay.getFullYear();
	var month = tryDay.getMonth() + 1;
	var day = tryDay.getDate();
	var ymdDate = "最後におみくじを引いた日：" + year + "年" + month + "月" + day + "日";
	switch (resultInt) {
	case 0 : resultText = "大凶"; resultClass = "bad"; break;
	case 1 : resultText = "凶"; resultClass = "bad"; break;
	case 2 : resultText = "末吉"; resultClass = "normal"; break;
	case 3 : resultText = "小吉"; resultClass = "normal"; break;
	case 4 : resultText = "中吉"; resultClass = "good"; break;
	case 5 : resultText = "吉"; resultClass = "good"; break;
	default : resultText = "大吉"; resultClass = "good"; break;
	}
	document.getElementById("result").textContent = resultText;
	document.getElementById("result").className = resultClass;
	document.getElementById("date").textContent = ymdDate;
	}
	</script>
	</head>
	<body>
	<div class="main">
	<h1>HTMLとJavaScriptによるWebおみくじ</h1>
	<p><img src="images/mouse.png"></p>
	<button class = "button_omikuji" onclick="tryFortune()">おみくじを引く</button>
	<p id = "result"></p>
	<p id = "date"></p>
	</div>
	</body>
	</html>

変更点を説明すると、まず以下で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」のリンクから今回の内容が確認できます。

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

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