<!-- 時計を作る -->
<html lang="ja">

<head>
	<meta charset="utf-8">
	<title>時計</title>
	<style>
		body {
			background-color: #000;
		}

		#clock {
			color: #fff;
			font-size: 100px;
			font-family: 'Orbitron', sans-serif;
			text-align: center;
			margin: 0 auto;
			padding-top: 100px;

			/* 文字をネオンにする */
			text-shadow: 0 0 10px #fff,
				0 0 20px #fff,
				0 0 30px #fff,
				0 0 40px #ff00de,
				0 0 70px #ff00de,
				0 0 80px #ff00de,
				0 0 100px #ff00de,
				0 0 150px #ff00de;

		}
	</style>
</head>

<body>
	<div id="clock"></div>
	<script>
		// 日にちを表示する
		function showClock() {
			var nowTime = new Date();
			var nowYear = nowTime.getFullYear();
			var nowMonth = nowTime.getMonth() + 1;
			var nowDate = nowTime.getDate();
			var nowHour = nowTime.getHours();
			var nowMin = nowTime.getMinutes();
			var nowSec = nowTime.getSeconds();
			var msg = nowYear + '年' + nowMonth + '月' + nowDate + '日' + nowHour + '時' + nowMin + '分' + nowSec + '秒';
			document.getElementById("clock").innerHTML = msg;
		}
		setInterval('showClock()', 1000);

		// 1分ごとに背景色を変える
		function changeColor() {
			var nowTime = new Date();
			var nowMin = nowTime.getMinutes();
			var nowSec = nowTime.getSeconds();
			var nowColor = '#' + nowMin + nowSec;
			document.body.style.backgroundColor = nowColor;
		}
		setInterval('changeColor()', 1000);
	</script>
</body>

</html>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.