44回目授業内容　イベントハンドラ〜脱線 - 四十路男TokiyoのWeb人生再スタートDiary

更新日の自動記述

<p>更新日：<!-- #BeginDate format:IS1m -->2013-01-23  16:22<!-- #EndDate --></p>

タイマー

<script>
var hourBox, minBox, secBox
var timer;

window.onload = init;
function init() {
	hourBox = document.clockForm.hour;
	minBox = document.clockForm.minute;
	secBox = document.clockForm.sec;
	dClock();
}
function dClock(){
	var now = new Date();
	var hour = now.getHours();
	var min = now.getMinutes();
	var sec = now.getSeconds();
	
	if (hore < 10) hour = '0' + hour;
	if (min < 10) hour = '0' + min;
	if (sec < 10) hour = '0' + sec;
	hourBox.value=hour;
	minBox.value=min;
	secBox.value=sec;
	timer = setTimeout('dClock', 1000);
}
</script>
</head>
<body>
<form name="clockForm">
<p>
<input type="text" name="hour">時
<input type="text" name="minute">分
<input type="text" name="sec">秒
</p>
</form>
</body>

デジタル時計

<style>
#clock {
	width: 450px;
	background-color: #000;
	color: #FFF;
	text-align: center;
	border:10px solid #666;
	font-size: 90px;
	font-family:monospace;
	font-weight:bold;
	padding: 10px 20px;
}
</style>
<script>
var hourSpan, minSpan, secSpan, now;
var hour, min, sec;
window.onload = init;
	function init() {
		hourSpan = document.getElementById("hour");
		minSpan = document.getElementById("min");
		secSpan = document.getElementById("sec");
		dClock();
	}

function dClock() {
	now = new Date();
	hour = now.getHours();
	min = now.getMinutes();
	sec = now.getSeconds();
		if (hour < 10) hour = '0' + hour;
		if (min < 10) hour = '0' + min;
		if (sec < 10) hour = '0' + sec;
		
		hourSpan.innerHTML = hour;
		minSpan.innerHTML = min;
		secSpan.innerHTML = sec;
		setTimeout("dClock()", 1000);
}
</script>
</head>
<body>
<h1>デジタル時計</h1>
<div id="clock">
<span id="hour">00</span>:<span id="min">00</span>:<span id="sec">00</span>
</div>
<p>更新日：<!-- #BeginDate format:IS1m -->2013-01-23  16:40<!-- #EndDate --></p>
</body>

脱線話（復活）

四十路男Tokiyoの人生再スタートblogもやってます。