スロットマシーン 2

スロットマシーン風の表示をします。
デモ

プログラム

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>スロットマシーン 2</title>
<style>
input {
	width:40px;
	font-size:30px;
	text-align:center;
}
button {
	width:50px;
}
.x1 {
	padding:10px 0;
}
.x1 div {
	float:left;
	width:60px;
	text-align:center;
}
</style>
<script>
window.onload = function() {
	function start() {
		if (!document.form1.start.disabled) {
			document.form1.start.disabled = true;
			document.form1.suuji[0].value = Math.floor(Math.random() * 10);
			document.form1.suuji[1].value = Math.floor(Math.random() * 10);
			document.form1.suuji[2].value = Math.floor(Math.random() * 10);
			document.form1.stop[0].disabled = false;
			document.form1.stop[1].disabled = false;
			document.form1.stop[2].disabled = false;
			start0();
			start1();
			start2();
		}
	}

	function start0() {
		if (!document.form1.stop[0].disabled) {
			document.form1.suuji[0].value = (+document.form1.suuji[0].value + 1) % 10;
			setTimeout(start0, 200);
		}
	}

	function start1() {
		if (!document.form1.stop[1].disabled) {
			document.form1.suuji[1].value = (+document.form1.suuji[1].value + 1) % 10;
			setTimeout(start1, 200);
		}
	}

	function start2() {
		if (!document.form1.stop[2].disabled) {
			document.form1.suuji[2].value = (+document.form1.suuji[2].value + 1) % 10;
			setTimeout(start2, 200);
		}
	}

	function stop0() {
		document.form1.stop[0].disabled = true;
		check();
	}

	function stop1() {
		document.form1.stop[1].disabled = true;
		check();
	}

	function stop2() {
		document.form1.stop[2].disabled = true;
		check();
	}

	function check() {
		if (document.form1.stop[0].disabled && document.form1.stop[1].disabled && document.form1.stop[2].disabled) {
			if (document.form1.suuji[0].value == document.form1.suuji[1].value && document.form1.suuji[0].value == document.form1.suuji[2].value) {
				alert('あたり！');
			} else {
				alert('はずれ！');
			}
			document.form1.start.disabled = false;
		}
	}

	document.form1.start.addEventListener('click', start);
	document.form1.stop[0].addEventListener('click', stop0);
	document.form1.stop[1].addEventListener('click', stop1);
	document.form1.stop[2].addEventListener('click', stop2);

	start();
}
</script>
</head>
<body>
	<form name="form1">
		<button type="button" name="start">start</button>
		<div class="x1">
			<div>
				<input type="text" name="suuji">
				<button type="button" name="stop">stop</button>
			</div>
			<div>
				<input type="text" name="suuji">
				<button type="button" name="stop">stop</button>
			</div>
			<div>
				<input type="text" name="suuji">
				<button type="button" name="stop">stop</button>
			</div>
		</div>
	</form>
</body>
</html>
解説

（追記予定）