KenjiOhtsuka/jsdoit.html

## jsdoit.html
<!DOCTYPE html>
<html>
  <head lang="ja">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>簡易ストップウォッチ</title>
    <meta name="description" content="javascript でストップウォッチを作ってみました。" />
    <meta name="keywords" content="HTML5,javascript,dom,ストップウォッチ" />
    <script type="text/javascript">
      var timer;
      var start;
      var time = 0;
      var current_time = 0;
      var interval = 100;
      var lapCount = 0;
      function getString() {
        var d = time;
        var resultString = '';
        var s = d % 60000;  d = (d - s) / 60000;
        s /= 1000;
        var m = d % 60;  d = (d - m) / 60;
        var h = d % 24;  d = (d - h) / 24;
        resultString = d + ' 日 ' +
          ('0' + h.toString()).slice(-2) + ' 時間 ' +
          ('0' + m.toString()).slice(-2) + ' 分 ' +
          ('0' + s.toFixed(1)).slice(-4) + ' 秒';
        return resultString;
      }
      function getNow() {
        //time = new Date().getTime() - start;
        return getString(time);
      }
      function display() {
        time = new Date().getTime() - start;
        document.getElementById("displayPanel").value = getString(time);
      }
      function LeftButtonOnClick(button) {
        if (button.value == 'Reset') {
          if (time == 0 || window.confirm('画面のデータがクリアされます。\nよろしいですか？')) {
            time = 0;
            current_time = 0;
            document.getElementById("displayPanel").value = getString(0);
            var table = document.getElementById('dataTable');
            while (lapCount > 0) {
              lapCount--;
              table.deleteRow(lapCount);
            }
            document.getElementById("getHTML").style.visibility = "hidden";
            document.getElementById("getTEXT").style.visibility = "hidden";
            document.getElementById("output").style.visibility = "hidden";
          }
        } else {
          var row = document.getElementById('dataTable').insertRow(lapCount);
          lapCount++;
          current_time = time;
          row.insertCell(0).innerHTML = lapCount.toString();
          row.insertCell(1).innerHTML = getString(current_time);
          row.insertCell(2).innerHTML = '<input type="text" name="memo" value="" placeholder="ここにメモを入力できます。" />';
          row.insertCell(3).innerHTML = getString(current_time - previousTime);
          previous_time = current_time;
        }
      }
      function RightButtonOnClick(button) {
        if (button.value == 'Start') {
          start = new Date().getTime() - time;
          document.getElementById("getHTML").style.visibility = "hidden";
          document.getElementById("getTEXT").style.visibility = "hidden";
          timer = setInterval("display();", interval);
          document.getElementById("RightButton").value = "Stop";
          document.getElementById("LeftButton").value = "Lap";
        } else {
          clearInterval(timer);
          time = new Date().getTime() - start;
          document.getElementById("RightButton").value = "Start";
          document.getElementById("LeftButton").value = "Reset";
          document.getElementById("getHTML").style.visibility = "visible";
          document.getElementById("getTEXT").style.visibility = "visible";
        }
      }
      function outputHTML() {
        var resultString = '';
        resultString += "<table>\n";
        resultString += "  <thead>\n";
          resultString += "    <tr><th>#</th><th>Time</th><th>Memo</th><th>Lap</th></tr>\n";
        resultString += "  </thead>\n";
        resultString += "  <tbody>\n";
        var table = document.getElementById("dataTable");
        var memos = document.getElementsByName("memo");
        for (var i = 0; i < lapCount; i++) {
          row = table.rows[i];
          resultString += "    <tr><td>" + row.childNodes[0].innerHTML +
              "</td><td>" + row.childNodes[1].innerHTML +
              "</td><td>" + memos[i].value + "</td><td></td></tr>\n";
        }
        resultString += "    <tr><td>" + lapCount.toString() +
            "</td><td>" + getNow() + "</td><td></td><td><td></td></tr>\n";
        resultString += "  </tbody>\n";
        resultString += "</table>";

        document.getElementById("output").value = resultString;
        document.getElementById("output").style.visibility = "visible";
      }
      function outputTEXT() {
        var resultString = '';
        var table = document.getElementById("dataTable");
        var memos = document.getElementsByName("memo");
        for (var i = 0; i < lapCount; i++) {
          row = table.rows[i];
          resultString += "[" + row.childNodes[0].innerHTML
                     + "] " + row.childNodes[1].innerHTML;
          if (memos[i].value != '') {
            resultString += " (" + memos[i].value + ")";
          }
          resultString += "\n";
        }
        resultString += "[" + lapCount.toString() + "] "
                      + getNow();
        document.getElementById("output").value = resultString;
        document.getElementById("output").style.visibility = "visible";
      }
      window.onload = function() {
        document.getElementById("LeftButton").onclick =
          function() {LeftButtonOnClick(this);};
        document.getElementById("RightButton").onclick =
          function() {RightButtonOnClick(this);};
        document.getElementById("displayPanel").value = getString(0);
        document.getElementById("getHTML").onclick =
          function() {outputHTML();};
        document.getElementById("getTEXT").onclick =
          function() {outputTEXT();};
      }
    </script>
    <style type="text/css">
      table {
        border-collapse: collapse;
        border-spacing: 0;
//        margin: 0 auto;
      }
      th, td {
        border: solid;
        border-width: 1px;
        border-color: #999;
        padding: 2px;
      }
      #getHTML, #getTEXT, #output {
        visibility: hidden;
      }
      #output {
        width: 400px;
        height: 300px;
      }
    </style>
  </head>
  <body>
    <h1>簡易ストップウオッチ</h1>
    <form action="#" id="console" name="console">
      <input type="text" value="" id="displayPanel" name="displayPanel" style="width:15em;" />
      <input type="button" value="Reset" id="LeftButton" name="LeftButton" />
      <input type="button" value="Start" id="RightButton" name="RightButton" />
    </form>
    <form action="#">

      <table>
        <thead>
            <tr><th>#</th><th>Time</th><th>Memo</th><th>Lap</th></tr>
        </thead>
        <tbody id="dataTable">
        </tbody>
      </table>
      <input type="button" id="getTEXT" value="結果出力(TEXT)" />
      <input type="button" id="getHTML" value="結果出力(HTML)" />
      <br />
      <textarea cols="20" rows="10" id="output"></textarea>
    </form>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head lang="ja">
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<title>簡易ストップウォッチ</title>
	<meta name="description" content="javascript でストップウォッチを作ってみました。" />
	<meta name="keywords" content="HTML5,javascript,dom,ストップウォッチ" />
	<script type="text/javascript">
	var timer;
	var start;
	var time = 0;
	var current_time = 0;
	var interval = 100;
	var lapCount = 0;
	function getString() {
	var d = time;
	var resultString = '';
	var s = d % 60000; d = (d - s) / 60000;
	s /= 1000;
	var m = d % 60; d = (d - m) / 60;
	var h = d % 24; d = (d - h) / 24;
	resultString = d + ' 日 ' +
	('0' + h.toString()).slice(-2) + ' 時間 ' +
	('0' + m.toString()).slice(-2) + ' 分 ' +
	('0' + s.toFixed(1)).slice(-4) + ' 秒';
	return resultString;
	}
	function getNow() {
	//time = new Date().getTime() - start;
	return getString(time);
	}
	function display() {
	time = new Date().getTime() - start;
	document.getElementById("displayPanel").value = getString(time);
	}
	function LeftButtonOnClick(button) {
	if (button.value == 'Reset') {
	if (time == 0 \|\| window.confirm('画面のデータがクリアされます。\nよろしいですか？')) {
	time = 0;
	current_time = 0;
	document.getElementById("displayPanel").value = getString(0);
	var table = document.getElementById('dataTable');
	while (lapCount > 0) {
	lapCount--;
	table.deleteRow(lapCount);
	}
	document.getElementById("getHTML").style.visibility = "hidden";
	document.getElementById("getTEXT").style.visibility = "hidden";
	document.getElementById("output").style.visibility = "hidden";
	}
	} else {
	var row = document.getElementById('dataTable').insertRow(lapCount);
	lapCount++;
	current_time = time;
	row.insertCell(0).innerHTML = lapCount.toString();
	row.insertCell(1).innerHTML = getString(current_time);
	row.insertCell(2).innerHTML = '<input type="text" name="memo" value="" placeholder="ここにメモを入力できます。" />';
	row.insertCell(3).innerHTML = getString(current_time - previousTime);
	previous_time = current_time;
	}
	}
	function RightButtonOnClick(button) {
	if (button.value == 'Start') {
	start = new Date().getTime() - time;
	document.getElementById("getHTML").style.visibility = "hidden";
	document.getElementById("getTEXT").style.visibility = "hidden";
	timer = setInterval("display();", interval);
	document.getElementById("RightButton").value = "Stop";
	document.getElementById("LeftButton").value = "Lap";
	} else {
	clearInterval(timer);
	time = new Date().getTime() - start;
	document.getElementById("RightButton").value = "Start";
	document.getElementById("LeftButton").value = "Reset";
	document.getElementById("getHTML").style.visibility = "visible";
	document.getElementById("getTEXT").style.visibility = "visible";
	}
	}
	function outputHTML() {
	var resultString = '';
	resultString += "<table>\n";
	resultString += " <thead>\n";
	resultString += " <tr><th>#</th><th>Time</th><th>Memo</th><th>Lap</th></tr>\n";
	resultString += " </thead>\n";
	resultString += " <tbody>\n";
	var table = document.getElementById("dataTable");
	var memos = document.getElementsByName("memo");
	for (var i = 0; i < lapCount; i++) {
	row = table.rows[i];
	resultString += " <tr><td>" + row.childNodes[0].innerHTML +
	"</td><td>" + row.childNodes[1].innerHTML +
	"</td><td>" + memos[i].value + "</td><td></td></tr>\n";
	}
	resultString += " <tr><td>" + lapCount.toString() +
	"</td><td>" + getNow() + "</td><td></td><td><td></td></tr>\n";
	resultString += " </tbody>\n";
	resultString += "</table>";

	document.getElementById("output").value = resultString;
	document.getElementById("output").style.visibility = "visible";
	}
	function outputTEXT() {
	var resultString = '';
	var table = document.getElementById("dataTable");
	var memos = document.getElementsByName("memo");
	for (var i = 0; i < lapCount; i++) {
	row = table.rows[i];
	resultString += "[" + row.childNodes[0].innerHTML
	+ "] " + row.childNodes[1].innerHTML;
	if (memos[i].value != '') {
	resultString += " (" + memos[i].value + ")";
	}
	resultString += "\n";
	}
	resultString += "[" + lapCount.toString() + "] "
	+ getNow();
	document.getElementById("output").value = resultString;
	document.getElementById("output").style.visibility = "visible";
	}
	window.onload = function() {
	document.getElementById("LeftButton").onclick =
	function() {LeftButtonOnClick(this);};
	document.getElementById("RightButton").onclick =
	function() {RightButtonOnClick(this);};
	document.getElementById("displayPanel").value = getString(0);
	document.getElementById("getHTML").onclick =
	function() {outputHTML();};
	document.getElementById("getTEXT").onclick =
	function() {outputTEXT();};
	}
	</script>
	<style type="text/css">
	table {
	border-collapse: collapse;
	border-spacing: 0;
	// margin: 0 auto;
	}
	th, td {
	border: solid;
	border-width: 1px;
	border-color: #999;
	padding: 2px;
	}
	#getHTML, #getTEXT, #output {
	visibility: hidden;
	}
	#output {
	width: 400px;
	height: 300px;
	}
	</style>
	</head>
	<body>
	<h1>簡易ストップウオッチ</h1>
	<form action="#" id="console" name="console">
	<input type="text" value="" id="displayPanel" name="displayPanel" style="width:15em;" />
	<input type="button" value="Reset" id="LeftButton" name="LeftButton" />
	<input type="button" value="Start" id="RightButton" name="RightButton" />
	</form>
	<form action="#">

	<table>
	<thead>
	<tr><th>#</th><th>Time</th><th>Memo</th><th>Lap</th></tr>
	</thead>
	<tbody id="dataTable">
	</tbody>
	</table>
	<input type="button" id="getTEXT" value="結果出力(TEXT)" />
	<input type="button" id="getHTML" value="結果出力(HTML)" />
	<br />
	<textarea cols="20" rows="10" id="output"></textarea>
	</form>
	</body>
	</html>