简易舰c远征计时器(HTML)

有时候项目闲下来想休息的时候会跑跑舰c远征，但计时比较麻烦。

所以每个现场都会写那么几个工具。以前是vba的，这次写了个HTML的，感觉还算易用就仍上来了。省得以后换现场还得再写。

纯粹是偷懒时做的，各种不符合规范请无视吧。

2016/04/05更新。

<head>
<style>
.col {
	float: left;
	text-align: center;
	border-top: 1px solid black;
	border-left: 1px solid black;
	border-bottom: 1px solid black;
	height: 30px;
	line-height: 30px;
	background-color: #EEE;
}
.col2 {
	float: left;
	text-align: center;
	border-left: 1px solid black;
	border-bottom: 1px solid black;
	height: 30px;
	line-height: 30px;
}
.colRight {
	border-right: 1px solid black;
}
.recInput {
	margin-top: 5px;
}
</style>
</head>

<div>
マイナス時間（-秒）：
<input id="difSec" maxlength="2" size="2" value="60" />

タイマー時間(分)：
<input id="setMin" maxlength="3" size="3" />
<select id="slt" size="5" onchange="selectChanged()">
	<option value="90" selected>1:30分</option>
	<option value="30">30分</option>
	<option value="140">2:20分</option>
	<option value="175">2:55分</option>
	<option value="40">40分</option>
</select>

<button onclick="addSet($('setMin').value, $('setFirstMin').value)">追加</button>

 ファーストタイマー：<input id="setFirstMin" maxlength="5" size="5" value="0" />
<br/>
※キャンセルはメッセージ一時非表示だけ。
</div>

<div style="margin-top: 20px;">
	<div id="header">
		<div class="col" style="width: 50px;">ID</div>
		<div class="col" style="width: 50px;">N週目</div>
		<div class="col" style="width: 150px;">前回開始時間</div>
		<div class="col" style="width: 150px;">次回終了時間</div>
		<div class="col" style="width: 70px;">前回偏差</div>
		<div class="col" style="width: 70px;">総計偏差</div>
		<div class="col" style="width: 60px;">Time(分)</div>
		<div class="col" style="width: 70px;">残り</div>
		<div class="col" style="width: 50px;">停止</div>
		<div class="col" style="width: 50px;">続く</div>
		<div class="col colRight" style="width: 70px;">残り(分)</div>
		<div style="clear:both"></div>
	</div>
	<div id="context" style="overflow-y: auto; height: 217px; width: 870px"></div>
</div>

<script type="text/javascript">

var setData = [];
var refresh = false;
refresh = setInterval(refreshTimer, 1000);

var CONST_DIFF_TIME_DEF = "-";

function addSet(min, firstMin) {
	var nowTime = new Date().getTime();
	// nowTime = nowTime - (nowTime % 60000);
	now = new Date(nowTime);
	var tmpData = {
		idx : setData.length,
		startTime : now,
		second : min * 60,
		millisecond : min * 60 * 1000,
		nexEndTime : new Date(nowTime + min * 60000),
		preDifTime : CONST_DIFF_TIME_DEF,
		allDifTime : CONST_DIFF_TIME_DEF,
		btnIdx : 0,
		difSec : $("difSec").value * -1000,
		on : true,
		count : 1,
	};
	if(firstMin != 0) {
		// 一回目以降の時間を保存する。
		//tmpData.secSecond = tmpData.second;
		// 一回目の時間を再計算する。
		//tmpData.second = firstMin * 60;
		//tmpData.millisecond = tmpData.second * 1000;
		tmpData.nexEndTime = new Date(nowTime + firstMin * 60000);
	}
	setData[setData.length] = tmpData;

	setStart(tmpData);
}
/**
 * タイマー追加
 */
function setStart(record) {
	//record.timer = setInterval(, record.millisecond + record.difSec);
	addHTMLLog(record);
}
/**
 * 指定時間タイマー過ぎたの続く処理確認ダイアログ
 */
function doTimer(record) {
	var r = confirm("ID「" + (record.idx + 1) + "」Time(" + getHMS(record.second) + ")の定時になった。タイマーを続く？");

	if(r == true) {
		toNext(record);
		return true;
	} else {
		record.on = false;
		setRestartBtn(record, true);
		return false;
	}
}
function stopTimer(record) {
	//clearInterval(record.timer);
	disablePreBtn(record);
	setRestartBtn(record, false);
	record.on = false;
}
function addHTMLLog(record) {
	var addHTML = '<div>' +
		'<div class="col2" style="width: 50px;">' + (record.idx + 1) + '</div>' +
		'<div class="col2" style="width: 50px;">' + (record.count) + '</div>' +
		'<div class="col2" style="width: 150px;">' + record.startTime.format("yyyy/MM/dd HH:mm:ss") + '</div>' +
		'<div class="col2" style="width: 150px;">' + record.nexEndTime.format("yyyy/MM/dd HH:mm:ss") + '</div>' +
		'<div class="col2" style="width: 70px;">' + getHMS(record.preDifTime) + '</div>' +
		'<div class="col2" style="width: 70px;">' + getHMS(record.allDifTime) + '</div>' +
		'<div class="col2" style="width: 60px;">' + getHMS(record.second) + '</div>' +
		'<div class="col2" style="width: 70px;" id="refTimer-' + getShowIdx(record) + '">' + getHMS(parseInt((record.nexEndTime - new Date()) / 1000)) + '</div>' +
		'<div class="col2" style="width: 50px;"><button id="stop-' + getShowIdx(record) + '" class="recInput" onclick="stopTimer(setData[' + record.idx + '])">停止</button></div>' +
		'<div class="col2" style="width: 50px;" id="restart-' + getShowIdx(record) + '"></div>' +
		'<div class="col2 colRight" style="width: 70px;"><input class="recInput" id="leakage-' + getShowIdx(record) + '" maxlength="5" size="2" style="display: none" value="' + (record.second / 60) + '" /></div>' +
		'<div style="clear:both"></div>' +
		'</div>';
	$("context").innerHTML = $("context").innerHTML + addHTML;
	$("context").scrollTop = $("context").scrollHeight;
	disablePreBtn(record);
	record.btnIdx = record.btnIdx + 1;
}
function getShowIdx(record, getNow) {
	var btnIdx = record.btnIdx;
	if(getNow === true) {
		btnIdx = btnIdx - 1;
	}
	return record.idx + "-" + btnIdx;
}
/**
 * 停止ボタンを非表示にする
 */
function disablePreBtn(record) {
	var btn = $("stop-" + getShowIdx(record, true));
	if(btn !== undefined && btn != null) {
		btn.style.display = "none";
	}
}
/**
 * 再開ボタン表示／非表示設定
 */
function setRestartBtn(record, isAdd) {
	var setDiv = $("restart-" + getShowIdx(record, true));
	if(setDiv !== undefined && setDiv != null) {
		if(isAdd) {
			setDiv.innerHTML = "<button onclick='reStart(setData[" + record.idx + "])' class='recInput'>再開</button>";
		} else {
			setDiv.innerHTML = "";
		}
	}

	var leakageI = $("leakage-" + getShowIdx(record, true));
	if(leakageI !== undefined && leakageI != null) {
		if(isAdd) {
			leakageI.style.display = "";
		} else {
			leakageI.style.display = "none";
		}
	}
}
/**
 * 再開ボタン処理
 */
function reStart(record) {
	setRestartBtn(record, false);

	// 監視漏れ時間設定
	var leakageTime;
	var leakageI = $("leakage-" + getShowIdx(record, true));
	if(leakageI !== undefined && leakageI != null) {
		leakageTime = leakageI.value;
	}
	toNext(record, leakageTime);
	record.on = true;
}
/**
 * 再開・続く処理
 */
function toNext(record, leakageTime) {
	var nowTime = new Date().getTime();
	var leakageTimeChk = parseInt(leakageTime)
	if(typeof leakageTimeChk == 'number' && !isNaN(leakageTimeChk)) {
		nowTime = nowTime - record.millisecond + (leakageTime * 60000);
	}

	var now = new Date(nowTime);
	record.startTime = now;
	record.preDifTime = parseInt((now - record.nexEndTime) / 1000);
	record.nexEndTime = new Date(nowTime + record.millisecond);
	record.count = record.count + 1;
	if(record.allDifTime == CONST_DIFF_TIME_DEF) {
		record.allDifTime = 0;
	}
	record.allDifTime = record.allDifTime + record.preDifTime;

	addHTMLLog(record);
}
/**
 * 画面表示更新・タイマー判断
 */
function refreshTimer() {
	setData.forEach(function (record) {
		if(record.on) {
			var now = new Date();
			var lastTime = parseInt((record.nexEndTime - now) / 1000);

			// ここが必ず先に取得必要。doTimer完了後、btnIdxが変わったから。
			var target = $("refTimer-" + getShowIdx(record, true));
			if(target === undefined || target == null) {
				return;
			}
			target.innerHTML = getHMS(lastTime);

			if(lastTime + (record.difSec / 1000) <= 0) {
				doTimer(record);
			}
		}
	});
}
function getHMS(setTimeV) {
	if(typeof setTimeV != 'number' || isNaN(setTimeV)) {
		return setTimeV;
	}

	var preV = "";
	if(setTimeV < 0) {
		preV = "-";
		setTimeV = -setTimeV;
	}
	//if(setTimeV > 0) {
		var sV = "";
		var notShowS = (setTimeV >= 600);
		if(setTimeV > 3600) {
			sV = parseInt(setTimeV / 3600) + "h ";
			setTimeV = setTimeV % 3600;
		}
		if(setTimeV > 60) {
			sV = sV + parseInt(setTimeV / 60) + "m ";
			setTimeV = setTimeV % 60;
		}
		if(!notShowS) {
			sV = sV + setTimeV + "s";
		}
		return preV + sV;
	//} else {
	//	//return "0s";
	//	return setTimeV + "s";
	//}
}

function selectChanged() {
	$('setMin').value = $('slt').value;
	$('setFirstMin').value = $('slt').value;
}
selectChanged();

function $(id) {
	return document.getElementById(id);
}
Date.prototype.format = function (format) {
	if (!format)
		format = 'yyyy-MM-dd HH:mm:ss.SSS';
	format = format.replace(/yyyy/g, this.getFullYear());
	format = format.replace(/MM/g, ('0' + (this.getMonth() + 1)).slice(-2));
	format = format.replace(/dd/g, ('0' + this.getDate()).slice(-2));
	format = format.replace(/HH/g, ('0' + this.getHours()).slice(-2));
	format = format.replace(/mm/g, ('0' + this.getMinutes()).slice(-2));
	format = format.replace(/ss/g, ('0' + this.getSeconds()).slice(-2));
	if (format.match(/S/g)) {
		var milliSeconds = ('00' + this.getMilliseconds()).slice(-3);
		var length = format.match(/S/g).length;
		for (var i = 0; i < length; i++)
			format = format.replace(/S/, milliSeconds.substring(i, i + 1));
	}
	return format;
}
</script>