#!/usr/bin/env ruby
require 'cgi'
cgi = CGI.new
# ヘッダーを出力
cgi.out("type" => "text/html", "charset" => "UTF-8") {
# 指定の条件に基づいてメッセージを設定
message = if timer >= 00:00:000 && timer < 00:03:000
"bad"
elsif timer >= 00:03:000 && timer < 00:04:000
"eary"
elsif timer >= 00:04:000 && timer < 00:04:500
"great"
elsif timer >= 00:04:500 && timer <= 00:05:300
"perfect"
else
"Out of Range"
end
# HTMLを出力
cgi.html {
cgi.head {
cgi.title { "ストップウォッチ" }
} +
cgi.body {
cgi.h1 { "ストップウォッチ" } +
cgi.p { "経過時間: #{timer}秒" } +
cgi.p { "メッセージ: #{message}" }
}
}
}
<!DOCTYPE html>
<html lang="ja">
<head>
<title>心のタイマー</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<form method="POST" action="./game.rb"></form>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="game.css">
<style>
.hidden {
display: none; /* 要素を非表示にする */
}
</style>
</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">00:00:000</div></h2>
<button class="start" onclick="startTimer()">スタート</button>
<button class="stop" onclick="stopTimer()" disabled>ストップ</button>
<input type="button" value="結果" onclick="toggleTimerVisibility()">
<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); // ミリ秒を計算
// 時間を2桁表示に整形して表示
document.querySelector('.timeCount').textContent =
('0' + minutes).slice(-2) + ':' + ('0' + seconds).slice(-2) + ':' + ('00' + milliseconds).slice(-3);
}, 1); // 1ミリ秒ごとに更新
document.querySelector('.stop').disabled = false; // ストップボタンを有効化
}
function stopTimer() {
clearInterval(timer); // タイマー停止
document.querySelector('.stop').disabled = true; // ストップボタンを無効化
}
function resetTimer() {
clearInterval(timer); // タイマー停止
document.querySelector('.timeCount').textContent = '00:00:000'; // タイマーをリセット
document.querySelector('.stop').disabled = true; // ストップボタンを無効化
}
function toggleTimerVisibility() {
var timeCount = document.querySelector('.timeCount');
if (timeCount.classList.contains('hidden')) {
timeCount.classList.remove('hidden'); // 要素を表示する
} else {
timeCount.classList.add('hidden'); // 要素を非表示にする
}
}
</script>
</body>
</html>
