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

随机推荐

Git介绍下载安装以及基本使用
目录一.git介绍二.下载安装git软件三.基本使用四.制作忽略文件五.Git.Gitee.GitHub.Gitlab.bitbucket的区别六.基础代码操作分类一.git介绍 git ...
10.MyBatis-Plus的使用
整合MyBatis-Plus 导入依赖在解决逆向工程生成的代码报错时候已经给bianen-common导入了依赖导入数据库的驱动导入驱动和MySql的版本有关,我安装的MySql版本是5.7.3 ...
第四周作业-N67044-张铭扬
1. 自定义写出10个定时任务的示例:比如每周三凌晨三点执行data命令要求尽量的覆盖各种场景 1)每天早上8点对磁盘使用率进行查看,若超出空间的80%,则发邮件报警 [root@centos8 ~] ...
Intellij IDEA远程debug
1.服务器开启远程调试模式,增加JVM启动参数,以支持远程调试服务器端的tomcat/bin/catalina.sh文件,在第一行添加参数配置如下(要确保下面的端口没有被占用).CATALINA_O ...
VUE学习-过渡 & 动画
过渡 & 动画 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果.包括以下工具: 在 CSS 过渡和动画中自动应用 class 在过渡钩子函数中使用 JavaScrip ...
golang 字符串函数
1. 统计字符串的长度,按字节进行统计 package main import "fmt" func main() { var s1 string = "hello,世界 ...
WDA学习（29）:WDA & HTML
1.22 HTML Container 本实例测试HTML在WDA中结合使用. 創建WDA Component: Z_TEST_WDA99 UI Element VIEW:MAIN 創建UI Elem ...
redis底层数据结构之整数集合(intset)
整数集合(intset) 当一个集合只包含整数值元素,并且这个集合的元素数量不多时,redis会使用整数集合(intset)作为集合键的底层实现整数集合用于保存整数值的集合抽象数据类型,它可以保存类 ...
Java并发编程 —— synchronized关键字
一.是什么?(作用) synchronized关键字解决了多个线程之间访问资源的同步性问题,保证了被其修饰的方法或是代码块在任意时刻只能有一个线程执行. 而在早期的Java版本中,synchroniz ...
java读取apk、ipa包名、版本名、版本号等信息
package com.gymexpress.exerciseservice.controller;import com.gymexpress.commonmodel.controller.BaseC ...

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

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

随机推荐

热门专题