簡易艦c遠征計時器(HTML)

来源:http://www.cnblogs.com/Yoooo/archive/2016/03/14/5276609.html
-Advertisement-
Play Games

有時候項目閑下來想休息的時候會跑跑艦c遠征，但計時比較麻煩。 所以每個現場都會寫那麼幾個工具。以前是vba的，這次寫了個HTML的，感覺還算易用就仍上來了。省得以後換現場還得再寫。 純粹是偷懶時做的，各種不符合規範請無視吧。


有時候項目閑下來想休息的時候會跑跑艦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>

　　


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Qt5下實現攝像頭預覽及捕獲圖像方法二（openCV3與Qt5交互使用）
    前言：OpenCV對圖像及視頻的處理方便且很專業，對於攝像頭的支持也很好，但有個不足就是它雖然具有GUI模塊（即highgui），但是實在是很簡陋，就連一個按鍵都無法直接實現（需要藉助滾動條實現），這一點難以滿足可視化的圖像處理的想法；另一方面，Qt作為一個優秀的圖形庫，在GUI上表現出色，且界面設
  • 20個非常有用的Java程式片段
                                                      
  • PHP實現非同步調用方法研究
    瀏覽器和伺服器之間是通過 HTTP 協議進行連接通訊的。這是一種基於請求和響應模型的協議。瀏覽器通過 URL 向伺服器發起請求，Web 伺服器接收到請求，執行一段程式，然後做出響應，發送相應的html代碼給客戶端。 這就有了一個問題，Web 伺服器執行一段程式，可能幾毫秒就完成，也可能幾分鐘都完不成
  • 運算符&,|，^
    1.&按位“與”的計算是把兩個數字分別寫成二進位形式，然後按照每一位進行比較，&計算中，只要有一個是0就算成02.|運算轉換成2進位進行比較，兩個位只要有一個為1，那麼結果就是1，否則就為03.^兩個數轉換為2進位然後比較位，相同則結果為0，不同則結果為1
  • java的concurrent用法詳解
    Maven引入    我們都知道，在JDK1.5之前，Java中要進行業務併發時，通常需要有程式員獨立完成代碼實現，當然也有一些開源的框架提供了這些功能，但是這些依然沒有JDK自帶的功能使用起來方便。而當針對高質量Java多線程併發程式設計時,為防止死蹦等現象的出現，比如使用java之前的wait(
  • 代碼重構(三)：數據重構規則（Swift版）
    在《代碼重構(一)：函數重構規則（Swift版）》和《代碼重構(二)：類重構規則（Swift版）》中詳細的介紹了函數與類的重構規則。本篇博客延續之前博客的風格，分享一下在Swift語言中是如何對數據進行重構的。對數據重構是很有必要的，因為我們的程式主要是對數據進行處理。如果你的業務邏輯非常複雜，那麼
  • [Android]一個乾凈的架構（翻譯）
    以下內容為原創，歡迎轉載，轉載請註明 來自天天博客： 一個乾凈的架構 原文： 在過去幾年中我們能看到的一系列關於系統架構的思想。它們包括： [Hexagonal Architecture]（也稱為 ），作者是 Alistair Cockburn，並被 Steve Freeman 和 Nat Pryc
  • 設計模式 之 策略（Strategy）模式
    最近看了《head first 設計模式》一書，便總結了裡面的一些內容，今天就簡單介紹一下策略模式。 策略模式：定義了演算法族，分別封裝起來，讓他們能夠相互替換，此模式讓演算法的變化獨立於使用演算法的客戶。簡單來說，就是將各個演算法分別封裝起來，使得他們能夠互換。 下麵是策略模式的示例結構圖：   策略模式
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類