JS:デジタル時計

JavaScript

digital_clock.html

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>デジタル時計</title>
	<style>
		#time{
			padding: 1em;
			font-size: 64px;
			font-weight: 900;
			font-family: 'Courier New', Courier, monospace;
		}
	</style>
	<script>
		let time;

		function showTime(){
			// 現在日時を取得
			let today = new Date();

			// 時分秒を取得
			let hour = today.getHours();
			let minute = today.getMinutes();
			let second = today.getSeconds();

			// 時刻を整形
			let mytime = hour + ":" + minute + ":" + second;

			// 現在時刻を表示する
			time.innerHTML = mytime;

			// 再帰呼び出し
			setTimeout(showTime, 500);
		}

		window.addEventListener("load", function(){
			time = document.getElementById("time");
			showTime();
		});
	</script>
</head>

<body>

	<h1>デジタル時計</h1>
	<p id="time"></p>

</body>
</html>

コメント

タイトルとURLをコピーしました