kits/stopwatch.html

## stopwatch.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<style>
input {
  font-size: 64px;
  width: 310px;
  font-family: Courier, monospace;
  border: none;
}
button {
  font-size: 24px;
  width: 310px;
  font-family: "Times New Roman", serif;
}
</style>
<title>stopwatch</title>
</head>
<body>
<form name="f">
<input name="t" type="text" value=""><br>
<button name="b" type="button" onclick="onoff()">start/stop</button>
</form>
<script>
var t = document.f.t;
t.value = "--:--:--";
var st, tid;

function onoff() {
  if (st) {
    clearTimeout(tid);
    st = null;
    return;
  }
  st = (new Date).getTime();
  sw();
}

function sw() {
  var now = (new Date).getTime();
  var ela = new Date(now - st);
  t.value = ela.toISOString().substring(11, 19);
  tid = setTimeout(sw, 100);
}
</script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="ja">
	<head>
	<meta charset="UTF-8">
	<style>
	input {
	font-size: 64px;
	width: 310px;
	font-family: Courier, monospace;
	border: none;
	}
	button {
	font-size: 24px;
	width: 310px;
	font-family: "Times New Roman", serif;
	}
	</style>
	<title>stopwatch</title>
	</head>
	<body>
	<form name="f">
	<input name="t" type="text" value=""><br>
	<button name="b" type="button" onclick="onoff()">start/stop</button>
	</form>
	<script>
	var t = document.f.t;
	t.value = "--:--:--";
	var st, tid;

	function onoff() {
	if (st) {
	clearTimeout(tid);
	st = null;
	return;
	}
	st = (new Date).getTime();
	sw();
	}

	function sw() {
	var now = (new Date).getTime();
	var ela = new Date(now - st);
	t.value = ela.toISOString().substring(11, 19);
	tid = setTimeout(sw, 100);
	}
	</script>
	</body>
	</html>