<!DOCTYPE html>
<html lang="ja">
<head>
<title>心のタイマー</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="game.css">
</head>
<body>
<h1 style="text-align: center;">心のタイマーと電子タイマーでJAAST TIME!!!</h1>
<h3 style="text-align: center;">ルール説明!!</h3>
<ul style="text-align: center;">
<p>時間を5秒ぴったりに当てよう!!</p>
<p>タイマーは表示されないので感覚で押そう!!</p>
<p>STARTとSTOPは自分で押してね!!</p>
</ul>
<div style="text-align: center;">
<!--<h2><div class="timeCount hidden" id="mg1">00:00:000</div></h2>-->
<button class="start" onclick="startTimer()">スタート</button>
<form method="POST" action="./game.rb"> <!-- formタグでPOSTリクエストを行う -->
<button class="stop" onclick="stopTimer()" disabled>ストップ</button>
<input type="submit" name="kekka" value="結果"> <!-- 結果ボタン -->
</form>
<p id="output_sample"></p>
</div>
<script>
var timer;
function startTimer() {
var startTime = Date.now();
timer = setInterval(function() {
var currentTime = Date.now() - startTime;
var minutes = Math.floor(currentTime / 60000);
var seconds = Math.floor((currentTime % 60000) / 1000);
var milliseconds = (currentTime % 1000).toString().slice(0, 3);
document.querySelector('.timeCount').textContent =
('0' + minutes).slice(-2) + ':' + ('0' + seconds).slice(-2) + ':' + ('00' + milliseconds).slice(-3);
document.querySelector('.timeCount').classList.remove('hidden');
}, 1);
document.querySelector('.stop').disabled = false;
}
function stopTimer() {
clearInterval(timer);
document.querySelector('.stop').disabled = true;
}
</script>
</body>
</html>
