简易舰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>

简易舰c远征计时器(HTML)的更多相关文章

ioc开发学习 --简易计时器（基于iPhone5屏幕尺寸开发）
超简单的秒表:包含:开始.暂停(不清零).清零方法核心代码 // // ViewController.m // MiaoBiao // // Created by Ibokan on 15/8/1 ...
jQuery+ localStorage 实现一个简易的计时器
原型图片发自简书App 需求1.关闭浏览器时时间继续运行2.刷新时保持当前状态3.结束时间保存在客户端 <div class="wrapper"> <div c ...
C语言基于GTK+Libvlc实现的简易视频播放器(二）
简易视频播放器-全屏播放一.课程说明上一次我们使用gtk+libvlc实现了一个最简单的视频播放器,可以实现点击按钮暂定和停止播放视频,以及同步显示视频播放进度,但即使作为一个视频播放器,只有这 ...
iOS：简易的音视屏播放框架XYQPlayer
一.前缀一直都想好好学学音视频这方面的知识,抽了几个周末参考一些资料,尝试着写了一个简易的音视频播放框架,支持音视频播放.视频截图.音乐缓存,其实吧,也就是尽可能的封装罢了,方便以后自己使用.目前只 ...
python3用pyqt5开发简易浏览器
http://python.jobbole.com/82715/ 在这篇教程中,我们会用 Python 的 PyQt 框架编写一个简单的 web 浏览器.关于 PyQt ,你可能已经有所耳闻了,它是 ...
【带着canvas去流浪（12）】用Three.js制作简易的MARVEL片头动画（上）
目录一. 大作业说明二.基本思路三.视频纹理表面修复--UV映射 3.1 问题描述 3.2 纹理贴图的基本原理-UV映射 3.3 关键示例代码四.小结示例代码托管在:http://www.g ...
【c#】分享一个简易的基于时间轮调度的延迟任务实现
在很多.net开发体系中开发者在面对调度作业需求的时候一般会选择三方开源成熟的作业调度框架来满足业务需求,比如Hangfire.Quartz.NET这样的框架.但是有些时候可能我们只是需要一个简易的延 ...
.NET里简易实现AOP
.NET里简易实现AOP 前言在MVC的过滤器章节中对于过滤器的使用就是AOP的一个实现了吧,时常在工作学习中遇到AOP对于它的运用可以说是很熟练了,就是没想过如果自己来实现的话是怎么实现的,性子比 ...
在.Net中实现自己的简易AOP
RealProxy基本代理类 RealProxy类提供代理的基本功能.这个类中有一个GetTransparentProxy方法,此方法返回当前代理实例的透明代理.这是我们AOP实现的主要依赖. 新建一 ...
.NET Core的文件系统[5]：扩展文件系统构建一个简易版“云盘”
FileProvider构建了一个抽象文件系统,作为它的两个具体实现,PhysicalFileProvider和EmbeddedFileProvider则分别为我们构建了一个物理文件系统和程序集内嵌文 ...

随机推荐

中后端做Excel导出功能返回数据流前端如何做处理
exportFile(params).then(res => { // 直接返回来就是blob数据 if (res) { const xlsx = 'application/vnd.ms-exc ...
Linux操作命令（五）1.find命令 2.xargs命令
1.find命令(一) 查找,沿着文件层次结构向下遍历,匹配符合条件的文件,并执行相应的操作参数描述 -print find 命令将匹配的文件输出到标准输出 -exec find 命令对匹配的文件 ...
Visual Studio 2022 不支持 .NET Framework 老版本项目解决办法
Visual Studio 2022 不支持 .NET Framework老版本 (4.5) 项目解决办法新电脑安装的是Visual Studio 2022,打开老项目的时候发现没有.net fra ...
LG8768 题解
题意传送门求长度为 \(n\) 的序列 \(a\) 的个数对 \(998244353\) 取模的结果,其中 \(a\) 满足: \(a_1=w\) \(a_{i-1}+L\le a_i\le a_ ...
[Vs和Reshaper]Vs Studio配合Resharper插件,某些快捷键无法使用的情况,Alt+F7
一直使用Alt+F7来查找变量或者类型的使用位置家里面的电脑某一天不可以用了,按了没有任何反应后来查到竟然是被别的软件快捷键覆盖了 Alt+F7是被Nvidia GeForce覆盖了,关掉它或者修 ...
redis 5.0.5集群部署与服务器宕机故障模拟
背景业务稳定性要求需要一套redis集群来保障因此采用 redis cluster 集群环境名称 ip地址 cpu 内存 master端口 slave端口 redis-651 10.65.6. ...
蓝桥杯题目——翻硬币无需修改‘*’与’o‘的特殊解法及其所包含的思想
前言本文介绍蓝桥杯题目--翻硬币的一种无需对字符串进行操作的解法及该解法所包含的思想. 题目信息桌上放着排成一排的若干硬币.我们用 * 表示正面,用 o 表示反面(是小写字母,不是零). 比如,可 ...
发送邮件找回密码采用outlook的 pop和smtp方式、qq邮箱smtp
一.outlook的pop方式,并指定发送人邮箱地址: 需要引入dll:Microsoft.Office.Interop.Outlook Outlook.Application olApp = new ...
URLSearchParams（鲜为人知处理URL地址的技能）
最近学习中无意发现url新处理方式,看到之后十分感兴趣就整理了一下. URLSearchParams URLSearchParams 接口定义了一些实用的方法来处理 URL 的查询字符串.参照 URL ...
leecode75. 颜色分类
75. 颜色分类给定一个包含红色.白色和蓝色.共 n 个元素的数组 nums ,原地对它们进行排序,使得相同颜色的元素相邻,并按照红色.白色.蓝色顺序排列. 我们使用整数 0. 1 和 2 分别表示 ...

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

简易舰c远征计时器(HTML)的更多相关文章

随机推荐

热门专题