你的位置:首页 > Java教程

[Java教程]简易舰c远征计时器(HTML)


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

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

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

<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;}.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;}.btn {	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="140">2:20分</option>	<option value="175">2:55分</option></select><button onclick="addSet($('setMin').value)">追加</button><br/>※キャンセルはメッセージ一時非表示だけ。</div><div >	<div id="header">		<div >ID</div>		<div >Time(分)</div>		<div >N週目</div>		<div >前回開始時間</div>		<div >次回終了時間</div>		<div >残り</div>		<div >停止</div>		<div >続く</div>		<div />	</div>	<div id="context" ></div></div><script type="text/javascript">var setData = [];var refresh = false;refresh = setInterval(refreshTimer, 1000);function addSet(min) {	var nowTime = new Date().getTime();	// nowTime = nowTime - (nowTime % 60000);	now = new Date(nowTime);	var tmpData = {		idx : setData.length,		startTime : now,		min : min,		second : min * 60,		millisecond : min * 60 * 1000,		nexEndTime : new Date(nowTime + min*60000),		btnIdx : 0,		difSec : $("difSec").value * -1000,		on : true,		count : 1,	};	setData[setData.length] = tmpData;		setStart(tmpData);		//if(!refresh) {	//	refresh = setInterval(refreshTimer, 1000);	//}}function setStart(record) {	//record.timer = setInterval(, record.millisecond + record.difSec);	addHTMLLog(record);}function doTimer(record) {	var r = confirm("ID「" + (record.idx + 1) + "」Time(" + (record.min) + "分)の定時になった。タイマーを続く?");	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 >' + (record.idx + 1) + '</div>' + 		'<div >' + (record.min) + '</div>' + 		'<div >' + (record.count) + '</div>' + 		'<div >' + record.startTime.format("yyyy/MM/dd HH:mm:ss") + '</div>' + 		'<div >' + record.nexEndTime.format("yyyy/MM/dd HH:mm:ss") + '</div>' + 		'<div  id="refTimer-' + getShowIdx(record) + '">' + getHMS(record.second) + '</div>' + 		'<div ><button id="stop-' + getShowIdx(record) + '" onclick="stopTimer(setData[' + record.idx + '])">停止</button></div>' + 		'<div  id="restart-' + getShowIdx(record) + '"></div>' + 		'<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='btn'>再開</button>";		} else {			setDiv.innerHTML = "";		}	}}function reStart(record) {	setRestartBtn(record, false);	toNext(record);	record.on = true;}function toNext(record) {	var nowTime = new Date().getTime();	var now = new Date(nowTime);	record.startTime = now;	record.nexEndTime = new Date(nowTime + record.millisecond);	record.count = record.count + 1;		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(setTimeV > 0) {		var sV = "";		if(setTimeV > 3600) {			sV = parseInt(setTimeV / 3600) + "h";			setTimeV = setTimeV % 3600;		}		if(setTimeV > 60) {			sV = sV + parseInt(setTimeV / 60) + "m";			setTimeV = setTimeV % 60;		}		sV = sV + setTimeV + "s";		return sV;	} else {		//return "0s";		return setTimeV + "s";	}}function selectChanged() {	$('setMin').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>