有时候项目闲下来想休息的时候会跑跑舰c远征，但计时比较麻烦。所以每个现场都会写那么几个工具。以前是vba的，这次写了个HTML的，感觉还算易用就仍上来了。省得以后换现场还得再写。纯粹是偷懒时做的，各种不符合规范请无视吧。<head><style>.col ...
有时候项目闲下来想休息的时候会跑跑舰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 > <div id="header"> <div >ID</div> <div >Time(分)</div> <div >N週目</div> <div >前回開始時間</div> <div >次回終了時間</div> <div >残り</div> <div >停止</div> <div >続く</div> <div /> </div> <div id="context" ></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 >' + (record.idx + 1) + '</div>' + '<div >' + (record.min) + '</div>' + '<div >' + (record.count) + '</div>' + '<div >' + record.startTime.format("yyyy/MM/dd HH:mm:ss") + '</div>' + '<div >' + record.nexEndTime.format("yyyy/MM/dd HH:mm:ss") + '</div>' + '<div id="refTimer-' + getShowIdx(record) + '">' + getHMS(record.second) + '</div>' + '<div ><button id="stop-' + getShowIdx(record) + '" onclick="stopTimer(setData[' + record.idx + '])">停止</button></div>' + '<div id="restart-' + getShowIdx(record) + '"></div>' + '<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='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>
原标题：简易舰c远征计时器(HTML)
关键词：HTML
*特别声明：以上内容来自于网络收集，著作权属原作者所有，如有侵权，请联系我们：
admin#shaoqun.com
（#换成@）。
