简易舰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则分别为我们构建了一个物理文件系统和程序集内嵌文 ...
随机推荐
- pat乙级 1021个位数统计
#include <stdio.h> #include <stdlib.h> #include <string.h> #include <math.h> ...
- react+Native使用typeScript
1.为什么使用typeScript? typeScript是JavaScript的超集 typeScript在编译期间就可以将错误抛出 增强代码的可阅读性和可维护性 2.案例的功能逻辑 切换职业 选择 ...
- shell中算术运算加减
在shell脚本中,所有的变量默认都是字符串存储,操作也是按照字符串进行处理的,但我们不可避免的需要对各中数值进行算术运算,如算术的相加减,那么这时怎么处理呢?在shell脚本中,我们要实现对数值的算 ...
- Markdwn学习
Markdwn学习 标题: 标题 二级标题 三级标题 几个标题有几个#(最多六级标题) 字体 Hell,World! 粗体两边加** Hello,World! 斜体两边加* Hello,World! ...
- linux挂载磁盘步骤
一.查看需要挂载设备,如下sda(默认路径/dev/sda) 二.新建分区,执行如下命令进入操作 fdisk /dev/sda 1.m 查看可操作的命令 2.键入 n ,根据需要新建分区 3.键入 d ...
- CentOS7下MySQL数据的导入和导出
一.数据导入 (1)进入mysql [root@localhost mysql]# mysql -u root -p (2)转到对应数据库下 mysql> use zenith_star; (3 ...
- ntp子母钟（gps子母钟系统）时钟系统在智能交通系统中的重要性
ntp子母钟(gps子母钟系统)时钟系统在智能交通系统中的重要性 ntp子母钟(gps子母钟系统)时钟系统在智能交通系统中的重要性 技术交流:岳峰 15901092122 http://www.bjh ...
- C# 将Dll文件打包到exe中
首先在资源管理里面将需要使用的dll添加进入 然后将dll文件的生成操作改成嵌入的资源 然后新建一个类 LoadResourceDll.cs 1 using System; 2 using Syst ...
- 12组-Alpha冲刺-5/6
一.基本情况 队名:字节不跳动 组长博客:https://www.cnblogs.com/147258369k/p/15562095.html 小组人数:10人 二.冲刺概况汇报 侯钦凯 过去两天完成 ...
- Python安装及配置教程
安装教程 一.python3.6安装步骤 1.首先我们移步官网,下载最新版本的python-3.6.0.点我,我把你传送到python官网 在DownLoad下拉框中点击Windows,选择要下载的文 ...