makotom/ergo3.html

## ergo3.html
<!doctype html>
<meta charset="UTF-8">
<title>ergo3</title>

<style>
body{
	margin-left: 100px;
	margin-right: 100px;
}
#sw{
	float: left;
	background-color: #ff0;
	width: 20px;
	height: 20px;
	margin-top: 230px;
	margin-left: 0;
}
#target{
	float: left;
	background-color: #f00;
	height: 500px;
}
#border{
	clear: both;
}
</style>

<script>
window.addEventListener("DOMContentLoaded", function(){
	var time = 0,
	sw = document.getElementById("sw"), tg = document.getElementById("target"), sv = document.getElementById("sv"),
	setValueFn = function(){
		var swCPS = window.getComputedStyle(sw), tgCPS = window.getComputedStyle(tg);

		tg.style.width = document.getElementById("wv").value + "px";
		tg.style.marginLeft = (parseFloat(document.getElementById("dv").value) - (parseFloat(tgCPS.width) / 2) + (parseFloat(swCPS.width) / 2)).toString() + "px";
	},
	feedbackFn = function(){
		var swCPS = window.getComputedStyle(sw),
		tgCPS = window.getComputedStyle(tg),
		dumpText = (parseFloat(tgCPS.marginLeft) + (parseFloat(tgCPS.width) / 2) - (parseFloat(swCPS.width) / 2)).toString() + "," +
			parseFloat(tgCPS.width).toString() + "," +
			(new Date().getTime() - time).toString();

		if(time === 0){
			return false;
		}
		document.getElementById("dump").value += dumpText + "\n";
		time = 0;
	};

	tg.addEventListener("mouseup", feedbackFn, false);

	sw.addEventListener("mousedown", function(){
		time = new Date().getTime();
	}, false);

	sv.onsubmit = function(){ return false; };
	sv.addEventListener("submit", setValueFn, false);

	setValueFn();
}, false);
</script>

<div id="sw"></div>
<div id="target"></div>
<br id="border">
<form id="sv">
Distance: <input type="text" id="dv" value="500" size="4">
Width: <input type="text" id="wv" value="50" size="4">
<input type="submit" value="Set">
</form>
<textarea id="dump"></textarea>
	<!doctype html>
	<meta charset="UTF-8">
	<title>ergo3</title>

	<style>
	body{
	margin-left: 100px;
	margin-right: 100px;
	}
	#sw{
	float: left;
	background-color: #ff0;
	width: 20px;
	height: 20px;
	margin-top: 230px;
	margin-left: 0;
	}
	#target{
	float: left;
	background-color: #f00;
	height: 500px;
	}
	#border{
	clear: both;
	}
	</style>

	<script>
	window.addEventListener("DOMContentLoaded", function(){
	var time = 0,
	sw = document.getElementById("sw"), tg = document.getElementById("target"), sv = document.getElementById("sv"),
	setValueFn = function(){
	var swCPS = window.getComputedStyle(sw), tgCPS = window.getComputedStyle(tg);

	tg.style.width = document.getElementById("wv").value + "px";
	tg.style.marginLeft = (parseFloat(document.getElementById("dv").value) - (parseFloat(tgCPS.width) / 2) + (parseFloat(swCPS.width) / 2)).toString() + "px";
	},
	feedbackFn = function(){
	var swCPS = window.getComputedStyle(sw),
	tgCPS = window.getComputedStyle(tg),
	dumpText = (parseFloat(tgCPS.marginLeft) + (parseFloat(tgCPS.width) / 2) - (parseFloat(swCPS.width) / 2)).toString() + "," +
	parseFloat(tgCPS.width).toString() + "," +
	(new Date().getTime() - time).toString();

	if(time === 0){
	return false;
	}
	document.getElementById("dump").value += dumpText + "\n";
	time = 0;
	};

	tg.addEventListener("mouseup", feedbackFn, false);

	sw.addEventListener("mousedown", function(){
	time = new Date().getTime();
	}, false);

	sv.onsubmit = function(){ return false; };
	sv.addEventListener("submit", setValueFn, false);

	setValueFn();
	}, false);
	</script>

	<div id="sw"></div>
	<div id="target"></div>
	<br id="border">
	<form id="sv">
	Distance: <input type="text" id="dv" value="500" size="4">
	Width: <input type="text" id="wv" value="50" size="4">
	<input type="submit" value="Set">
	</form>
	<textarea id="dump"></textarea>