简易舰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则分别为我们构建了一个物理文件系统和程序集内嵌文 ...

随机推荐

How to present a paper 怎么讲好一篇文献
Author : 如果在冬夜一个旅人 Date : 2022/05/24 目录背景说明 1 读文献 1.1 读文献的层次 1.2 论文阅读的首轮次序 2 讲文献 2.1 The Problem to ...
C++ MFC学习 (四)
对话框创建MFC应用程序时,选择对话框可使用向导创建对应的对话框的类 1 // MFC_Demo2Dlg.cpp : 实现文件 2 // 3 4 #include "stdafx.h&q ...
一次eureka的事故
本地起了一个微服务(不知道怎么起的),导致注册到微服务上了,不知所措.. 想了下,杀死对应微服务的进程id就可以了(记不住啊!!)
xxx.app 已损坏，无法打开，你应该将它移到废纸篓/打不开 xxx，因为它来自身份不明的开发者解决方法
xxx已损坏,无法打开,你应该将它移到废纸篓解决办法打不开 xxx,因为它来自身份不明的开发者打不开xxxx,因为 Apple 无法检查其是否包含恶意软件在安装的时候提示加载失败! 解决: 打开 ...
C++ 手动实现队列(queue) （课后作业版）
#include <iostream> using namespace std; template <typename T> class Queue { public: Que ...
Cannot read property 'xxxx' of null
在使用的vue3+element-plus的项目中,我使用了form表单对数据进行校验. 但是使用了: refDom.value.validate((valid) => {}) 后,过一会控制台 ...
centos 换源
原文: https://blog.csdn.net/MateSnake/article/details/124088310 备份原来的源:sudo mv /etc/yum.repos.d/CentOS ...
CTF学习笔记（二）
二.常见的HTML知识 (一)rorbts协议 robots协议也称爬虫协议.爬虫规则等,是指网站可建立一个robots.txt文件来告诉搜索引擎哪些页面可以抓取,哪些页面不能抓取,而搜索引擎则通过读 ...
yagmail 邮件模块
安装 yagmail 安装yagmail:https://coding.net/s/01e2c2fe-82c0-4e05-a31b-f3e9e2dbc43a 下载完成之后,cmd 切换到文件目录下,执 ...
Kubernetes--资源注解
资源注解除了标签(label)之外,Pod与其他各种资源还能使用资源注解(annotation).与标签类似,注解也是"键值"类型的数据,不过它不能用于标签及挑选Kubernet ...

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

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

随机推荐

热门专题