感謝のプログラミング 10000時間

たどり着いた結果(さき)は、感謝でした。

JavaScriptでストップウォッチ作ろうとして心折れた

<スポンサーリンク>

後で直すようにメモ。


検索で一番上に出てくるコレ↓に止めたところから再始動の機能をつけたかったんだが・・・
http://www.scollabo.com/banban/java/jvsample_014.html
結局ダメ。
時間の差分がうまくとれなかった。
21時から3時まで無駄に時間過ごしてしまった。畜生悔しい。ちくしょう。

そして、色々と検索してたら、
ドットインストールに答えがあるじゃねぇか・・・。
3時までやって何もできなかった。惜しかった気がするんだけど
http://dotinstall.com/lessons/stop_watch_js_v2/23205
今週末からドットインストールの有料会員になることに決めた。

以下はダメコード。
これは参考にせずに、ドットインストールを見てください。
週末にもう一回やる。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>thisの検証</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(function() {

	/**
	 ストップウォッチ
	*/
	var runFlag = 0;
	var startButton = $("#go");
	var stopButton = $("#stop");
	var resetButton = $("#reset");
	var resultWindow = $("#stopwatch");

	var startTime = 0;
	var calcStartTime = null;
	var stoppedTime = null;
	var defferenceTime = null;
	var resetFlag = 0;
	var realTime = 0;
	var id = -1;

	startButton.on('click', function() {
		startButton.text('スタート中...');
		startButton.attr('disabled', true);
		stopButton.attr('disabled', false);
		start();

	});

	stopButton.on('click',function() {
		stoptime();
		startButton.attr('disabled', false);
		startButton.text('再スタート!');
		stopButton.attr('disabled', true);
	});

	resetButton.on('click', function() {
		startButton.text('スタート!');
		reset();
	})

	function start() {
		startTime = new Date();
		console.log(stoppedTime);
		if (calcStartTime == null) {
			calcStartTime = startTime;
		} 

		setTimeout(function metaDisplay() {
			display();
			id = setTimeout(metaDisplay, 1);
		},1);
	}

	function stoptime() {
		clearInterval(id);
		stoppedTime = new Date();
		startButton.attr('disabled', false);
	}

	function reset() {
		resetFlag = 1;
		calcStartTime = new Date();
		display();
	}

	function display() {
		realTime = new Date();
		if (stoppedTime) {
			//ここがポイント??でもこれだと、「差分からスタート」しかできない。
			var calcedTime = realTime.getTime() - stoppedTime.getTime(); 
			//var calcedTime = realTime.getTime() - (stoppedTime.getTime() + defferenceTime) ; 
		} else {
			var calcedTime = realTime.getTime() - calcStartTime.getTime();
		}
		
		var hour = Math.floor(calcedTime/(60*60*1000));
		var time = calcedTime-(hour*60*60*1000);
		var minute = Math.floor(calcedTime/(60*1000));
		calcedTime = calcedTime - (minute*60*1000);
		second = Math.floor(calcedTime/1000);
		milSec = calcedTime%1000;
		resultWindow.val(hour+":"+minute+":"+second+":"+milSec);
		startButton.attr('disabled', false);
	}

	function replay() {

	}
})
</script>
</head>
<body>
<h2>ストップウォッチ</h2>
<button id="go">スタート!</button><button id="stop">ストップ!</button><button id="reset">リセット</button><br/>
<input type="text" size="20" id="stopwatch"><br/>

</body>
</html>