japa script　ストップウォッチ

ストップウォッチ


<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<style>
body{ 	background-color:#000; color:#fff; padding :10px; }
h1{ margin :0; padding :5px; width :250px; text-align:center; }

#sec,#mode{
	background-color :#aaa;
	color	 :#000;
	width    :250px;
	margin	 :20px 0;
	padding  :5px;
	text-align:center;
}
#sec{ font-size:100px; }
#mode,.button{ font-size:30px;font-weight:bold; }
#play{ margin :30px 0 100px;}
</style>
<title>java script ストップウォッチ</title>
</head>
<body>
<h1>ストップウォッチ</h1>
<div id="mode">練習モード</div>
<div id="sec">0.00</div>
<input type="button" value="練習モード" onclick="rens();">　数字が表示されます。<br>
<input type="button" value="本番モード" onclick="honb();">　数字が表示されません。<br>
<input type="button" value="スタート" onclick="start();"><br>
<input type="button" value="ストップ" onmousedown="stop();"><br>
<div id="play">
<a href="http://www.youtube.com/watch?v=IOKwNybh64Y" target="_blank">遊び方（前半）</a><br><br>
<a href="http://www.youtube.com/watch?v=CgMcQWVQp0c&feature=relmfu" target="_blank">遊び方（後半）</a>
</div>
<script type="text/javascript"><!------------------------------------------------>
var a=0,b=0,c=0,time,mode=0,run;
var mo=document.getElementById("mode")
var se=document.getElementById("sec")

	function start(){ if (run) return; run=1;
		time=setInterval(function(){ 
c++; if (c>9)  { 
		c=0; b++; if (b>9) {b=0; a++; if (a>59) a=0; }}
		if (mode) { se.innerHTML=c+"."+c+c; }else{
			    se.innerHTML=a+"."+b+c; }},10); }

	function stop() { if (!run) return; run=0;      clearInterval(time);
		  se.innerHTML=a+"."+b+c; a=0;b=0;c=0; }

	function rens() { if (run) return; mode=0;re();
		  mo.style.backgroundColor ="#aaa";
		  mo.style.color ="#000";
		  mo.innerHTML="練習モード"; }

	function honb() { if (run) return; mode=1;re();
		  mo.style.backgroundColor ="#000";
		  mo.style.color ="#f00";
		  mo.innerHTML="本番モード"; }

	function re(){ a=0;b=0;c=0;se.innerHTML="0.00"; }


</script><!---------------------------------------------------------------------->
</body>
</html>