ストップウォッチアプリ
Time: 0s
Count: 0
5秒±0.3秒でストップ!
失敗すると「人生の敗者」と表示されます。
<!DOCTYPE html>
<html>
<head>
<title>ストップウォッチアプリ</title>
<script>
var count = 0;
var timer;
function startTimer(){
var startTime = new Date().getTime();
timer = setInterval(function(){
var currentTime = new Date().getTime();
var difference = currentTime - startTime;
var seconds = (difference / 1000).toFixed(2);
document.getElementById("timer").innerHTML = "Time: " + seconds + "s";
}, 10);
}
function stopTimer(){
clearInterval(timer);
var time = parseFloat(document.getElementById("timer").innerHTML.split(" ")[1]);
if(Math.abs(time - 5) <= 0.3){
count++;
document.getElementById("result").innerHTML = "成功!";
document.getElementById("count").innerHTML = "Count: " + count;
} else {
document.body.style.animation = "rotate 2s infinite";
setTimeout(function(){
document.body.style.animation = "";
document.getElementById("result").innerHTML = "失敗!";
}, 2000);
}
}
</script>
<style>
body{
display: flex;
flex-direction: column;
align-items: center;
font-size: 30px;
font-weight: bold;
height: 100vh;
margin: 0;
background-color: #fff;
color: #000;
text-align: center;
animation-duration: 0.3s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@keyframes rotate{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
button{
padding: 10px 20px;
cursor: pointer;
background-color: #000;
color: #fff;
border: none;
border-radius: 5px;
font-size: 20px;
font-weight: bold;
margin-top: 20px;
}
</style>
</head>
<body>
<h1>ストップウォッチアプリ</h1>
<div id="timer">Time: 0s</div>
<div id="result"></div>
<div id="count">Count: 0</div>
<button onclick="startTimer()">START</button>
<button onclick="stopTimer()">STOP</button>
<p>5秒±0.3秒でストップ!<br>失敗すると「人生の敗者」と表示されます。</p>
</body>
</html>