JavaScript で作業時間数計算

昔使っていたはてなブログの中で一番アクセスが多かった記事は、「JavaScript で作業時間数計算」という記事でした。
自分が現在使っているHTMLファイルにコメント入れて Qiita で再掲します。

### HTMLファイル

```html:calchour.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>時間数計算 202012版</title>
<script type="text/javascript">
	function allclear() {
		var myst = document.getElementsByName("myst");
		var myen = document.getElementsByName("myen");
		var res = document.getElementsByName("res");
		var len = myst.length;//入力行の数
		PLAN.allres.value = 0;

		for ( var i = 0; i < len; ++i) {
			myst[i].value = '';
			myen[i].value = '';
			res[i].value = 0;
		}

	}

	function calc() {
		var myst = document.getElementsByName("myst");
		var myen = document.getElementsByName("myen");
		var res = document.getElementsByName("res");
		var len = myst.length;//入力行の数
		var total = 0;

		for ( var i = 0; i < len; ++i) {
			//：記号と空白を除去し、入力欄の値に反映します。
			stvalorg = myst[i].value.replace(/^\s+|\s+$|\:/g, '');
			envalorg = myen[i].value.replace(/^\s+|\s+$|\:/g, '');
			myst[i].value = stvalorg;
			myen[i].value = envalorg;

			//未入力、数値ではない、時刻逆転の３種類の場合、計算対象外にします。
			if (stvalorg == '' || envalorg == '' || isNaN(stvalorg)
					|| isNaN(envalorg) || stvalorg > envalorg) {
				myhr = 0;
			} else {
				//4桁未満の入力の場合に対応
				stval = '0000' + stvalorg;
				enval = '0000' + envalorg;

				//時と分を2桁ずつ切り出します。
				stmn = stval.substr(-2, 2);
				enmn = enval.substr(-2, 2);
				sthr = stval.substr(-4, 2);
				enhr = enval.substr(-4, 2);

				//15分単位で割り算し切り捨て後、時間単位に変換
				myhr = Math.floor(((parseInt(enhr) - parseInt(sthr)) * 60
						+ parseInt(enmn) - parseInt(stmn)) / 15) / 4;

				//1200以前に開始し、1300以降に終了した場合は1時間減。
				if (stval.substr(-4, 4) <= '1200'
						&& enval.substr(-4, 4) >= '1300') {
					myhr -= 1;
				}

				//1730以前に開始し、1800以降に終了した場合は30分減。
				if (stval.substr(-4, 4) <= '1730'
						&& enval.substr(-4, 4) >= '1800') {
					myhr -= 0.5;
				}
			}
			res[i].value = myhr;
			total += myhr;
		}

		PLAN.allres.value = total;
	}
</script>
</head>
<body>
	<form name="PLAN">
		<table>
			<tr>
				<th>開始時刻</th>
				<th>終了時刻</th>
				<th>時間数(0.25単位)</th>
			</tr>
			<tr>
				<td><input type="text" name="myst" size="6" maxlength="5"
					tabindex="1"></td>
				<td><input type="text" name="myen" size="6" maxlength="5"
					tabindex="2" onblur="calc()"></td>
				<td><input type="text" name="res" size="4" value="0"></td>
			</tr>
			<tr>
				<td><input type="text" name="myst" size="6" maxlength="5"
					tabindex="3"></td>
				<td><input type="text" name="myen" size="6" maxlength="5"
					tabindex="4" onblur="calc()"></td>
				<td><input type="text" name="res" size="4" value="0"></td>
			</tr>
			<tr>
				<td><input type="text" name="myst" size="6" maxlength="5"
					tabindex="5"></td>
				<td><input type="text" name="myen" size="6" maxlength="5"
					tabindex="6" onblur="calc()"></td>
				<td><input type="text" name="res" size="4" value="0"></td>
			</tr>
			<tr>
				<td><input type="text" name="myst" size="6" maxlength="5"
					tabindex="7"></td>
				<td><input type="text" name="myen" size="6" maxlength="5"
					tabindex="8" onblur="calc()"></td>
				<td><input type="text" name="res" size="4" value="0"></td>
			</tr>
			<tr>
				<td><input type="text" name="myst" size="6" maxlength="5"
					tabindex="9"></td>
				<td><input type="text" name="myen" size="6" maxlength="5"
					tabindex="10" onblur="calc()"></td>
				<td><input type="text" name="res" size="4" value="0"></td>
			</tr>
			<tr>
				<td><input type="text" name="myst" size="6" maxlength="5"
					tabindex="11"></td>
				<td><input type="text" name="myen" size="6" maxlength="5"
					tabindex="12" onblur="calc()"></td>
				<td><input type="text" name="res" size="4" value="0"></td>
			</tr>
			<tr>
				<td><input type="text" name="myst" size="6" maxlength="5"
					tabindex="13"></td>
				<td><input type="text" name="myen" size="6" maxlength="5"
					tabindex="14" onblur="calc()"></td>
				<td><input type="text" name="res" size="4" value="0"></td>
			</tr>
			<tr>
				<th colspan="2">合計：</th>
				<td><input type="text" name="allres" size="4" value="0"></td>
		</table>
		<br /> <input type="button" onclick="calc()" value="再計算"
			tabindex="90"> &nbsp;&nbsp; <input type="button"
			onclick="allclear()" value="クリア" tabindex="99">
	</form>
</body>
</html>
```

### 注意
- 15分(0.25時間)単位での計算です。
- Google Chrome で動作確認済です。
- 12時から13時の間をまたぐ作業は、休憩時間1時間とみなして計算します。(例: 11:30 - 14:00 は1時間半扱い)
- 17時30分から18時の間をまたぐ作業は、休憩時間1時間とみなして計算します。これは会社によりルールが違うでしょう。
- しかしながら、休憩時間の途中で終わったり、始まったりする場合はそのまま計算します。(例: 11:30 - 12:15 は45分扱い)

もしお役に立てば幸いです。