指定時間後に処理を実行

JavaScript 基礎 授業



デジタル時計の作成


  • タイマー機能/li>

  • 一定時間ごとに処理を繰り返す

  • windowオブジェクトの「setTimeoutメソッド」を使用


ソースコード【 HTML 】

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タイマー</title>

<style>

input {
	width: 90px;
	font-size: 66px;
	font-family: monospace;/* [ monospace ]モノスペース */
	padding: 8px;
	}

p {
	font-size: 40px;
	}

</style>

<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(hour < 10) hour = '0' + hour;
	if(min < 10) min = '0' + min;
	if(sec < 10) sec = '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>
</html>


ブラウザで表示