oyyq99999/FMCTimer.html

## FMCTimer.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>FMC Timer</title>
	<style>
		html, body {
			height: 100%;
			background: white;
		}
		#wrapper {
			display: flex;
			width: 100%;
			height: 100%;
			justify-content: center;
			align-items: center;
			align-content: center;
		}
		#time {
			position: relative;
			font-size: 666px;
			font-family:  "Digiface";
		}
	</style>
</head>
<body>
	<div id="wrapper">
		<div id="time">00:00</div>
	</div>
	<script>
		let running = 0
		let prepareTime = 15 * 1000
		let startTime = 0
		let timer = null

		let tenSec = false, fiveSec = false, fiveMin = false

		function say(s) {
			const msg = new SpeechSynthesisUtterance(s)
			window.speechSynthesis.speak(msg)
		}

		function padDigits(number, digits) {
			return Array(Math.max(digits - String(number).length + 1, 0)).join(0) + number;
		}

		function formatTime(time) {
			if (time > 55 * 60 * 1000 && !fiveMin) {
				say('还有5分钟')
				fiveMin = true
			}
			if (time >= 60 * 60 * 1000) {
				say('战斗结束')
				running = 0
			}
			if (time > 0 * 60 * 1000) {
				time = ~~(time / 1000)
				seconds = time % 60
				minutes = ~~(time / 60)
				seconds = padDigits(seconds, 2)
				minutes = padDigits(minutes, 2)
				return [minutes, seconds].join(':')
			} else {
				millis = time % 1000
				time = ~~(time / 1000)
				seconds = time % 60
				minutes = ~~(time / 60)
				millis = padDigits(millis, 3)
				if (seconds < 10 && minutes > 0) seconds = '0' + seconds
				return minutes > 0 ? minutes + ':' + seconds + '.' + millis : seconds + '.' + millis
			}
		}
		let runner = function() {
			if (running == 0) return

			now = Date.now()
			if (running == 1) {
				if (now - startTime > prepareTime) {
					running = 2
					startTime = now
					say('战斗开始')
				} else {
					remainingPrepareTime = ~~((prepareTime - (now - startTime)) / 1000) + 1
					document.querySelector('#time').innerText = remainingPrepareTime
				}
				if ((prepareTime - (now - startTime)) < 10 * 1000 && !tenSec) {
					say('还剩10秒')
					tenSec = true
				}
				if ((prepareTime - (now - startTime)) < 5 * 1000 && !fiveSec) {
					say('还剩5秒')
					fiveSec = true
				}
			}
			if (running == 2) {
				elapsed = now - startTime
				timeText = formatTime(elapsed)
				document.querySelector('#time').innerText = timeText
			}
			setTimeout(runner, 0)
		}
		function start() {
			running = 1
			fiveSec = false
			tenSec = false
			fiveMin = false
			startTime = Date.now()
			say('请做郝战斗准备')
			timer = setTimeout(runner, 0)
		}
		window.onkeyup = function (e) {
			if (e.keyCode == 32) {
				if (running == 0) {
					start()
				} else {
					running = 0
				}
			}
			if (e.keyCode == 70) { // f
				document.body.requestFullscreen()
			}
		}
	</script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>FMC Timer</title>
	<style>
	html, body {
	height: 100%;
	background: white;
	}
	#wrapper {
	display: flex;
	width: 100%;
	height: 100%;
	justify-content: center;
	align-items: center;
	align-content: center;
	}
	#time {
	position: relative;
	font-size: 666px;
	font-family: "Digiface";
	}
	</style>
	</head>
	<body>
	<div id="wrapper">
	<div id="time">00:00</div>
	</div>
	<script>
	let running = 0
	let prepareTime = 15 * 1000
	let startTime = 0
	let timer = null

	let tenSec = false, fiveSec = false, fiveMin = false

	function say(s) {
	const msg = new SpeechSynthesisUtterance(s)
	window.speechSynthesis.speak(msg)
	}

	function padDigits(number, digits) {
	return Array(Math.max(digits - String(number).length + 1, 0)).join(0) + number;
	}

	function formatTime(time) {
	if (time > 55 * 60 * 1000 && !fiveMin) {
	say('还有5分钟')
	fiveMin = true
	}
	if (time >= 60 * 60 * 1000) {
	say('战斗结束')
	running = 0
	}
	if (time > 0 * 60 * 1000) {
	time = ~~(time / 1000)
	seconds = time % 60
	minutes = ~~(time / 60)
	seconds = padDigits(seconds, 2)
	minutes = padDigits(minutes, 2)
	return [minutes, seconds].join(':')
	} else {
	millis = time % 1000
	time = ~~(time / 1000)
	seconds = time % 60
	minutes = ~~(time / 60)
	millis = padDigits(millis, 3)
	if (seconds < 10 && minutes > 0) seconds = '0' + seconds
	return minutes > 0 ? minutes + ':' + seconds + '.' + millis : seconds + '.' + millis
	}
	}
	let runner = function() {
	if (running == 0) return

	now = Date.now()
	if (running == 1) {
	if (now - startTime > prepareTime) {
	running = 2
	startTime = now
	say('战斗开始')
	} else {
	remainingPrepareTime = ~~((prepareTime - (now - startTime)) / 1000) + 1
	document.querySelector('#time').innerText = remainingPrepareTime
	}
	if ((prepareTime - (now - startTime)) < 10 * 1000 && !tenSec) {
	say('还剩10秒')
	tenSec = true
	}
	if ((prepareTime - (now - startTime)) < 5 * 1000 && !fiveSec) {
	say('还剩5秒')
	fiveSec = true
	}
	}
	if (running == 2) {
	elapsed = now - startTime
	timeText = formatTime(elapsed)
	document.querySelector('#time').innerText = timeText
	}
	setTimeout(runner, 0)
	}
	function start() {
	running = 1
	fiveSec = false
	tenSec = false
	fiveMin = false
	startTime = Date.now()
	say('请做郝战斗准备')
	timer = setTimeout(runner, 0)
	}
	window.onkeyup = function (e) {
	if (e.keyCode == 32) {
	if (running == 0) {
	start()
	} else {
	running = 0
	}
	}
	if (e.keyCode == 70) { // f
	document.body.requestFullscreen()
	}
	}
	</script>
	</body>
	</html>