昔使っていたはてなブログの中で一番アクセスが多かった記事は、「JavaScript で作業時間数計算」という記事でした。
自分が現在使っているHTMLファイルにコメント入れて Qiita で再掲します。
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"> <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分扱い)
もしお役に立てば幸いです。