有时候项目闲下来想休息的时候会跑跑舰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 style="margin-top: 20px;">
<div id="header">
<div class="col" style="width: 50px;">ID</div>
<div class="col" style="width: 60px;">Time(分)</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: 50px;">停止</div>
<div class="col colRight" style="width: 50px;">続く</div>
<div style="clear:both"/>
</div>
<div id="context" style="overflow-y: auto; height: 217px; width: 658px"></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 class="col2" style="width: 50px;">‘ + (record.idx + 1) + ‘</div>‘ +
‘<div class="col2" style="width: 60px;">‘ + (record.min) + ‘</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;" id="refTimer-‘ + getShowIdx(record) + ‘">‘ + getHMS(record.second) + ‘</div>‘ +
‘<div class="col2" style="width: 50px;"><button id="stop-‘ + getShowIdx(record) + ‘" class="btn" onclick="stopTimer(setData[‘ + record.idx + ‘])">停止</button></div>‘ +
‘<div class="col2 colRight" style="width: 50px;" id="restart-‘ + getShowIdx(record) + ‘"></div>‘ +
‘<div style="clear:both"/>‘ +
‘</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>
原文：http://www.cnblogs.com/Yoooo/p/5276609.html