반응형
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>반응속도 테스트</title>
<style>
*{
margin:0;
padding:0;
}
body{
background-color: black;
}
#container{
margin-top:200px;
margin-left: auto;
margin-right:auto;
width:100%;
height:250px;
background-color: rgb(89, 255, 47);
text-align: center;
}
#out{
line-height:250px;
font-size:200px;
}
</style>
<script>
window.onload = function() {
var button = document.getElementById("container");
var out = document.getElementById("out");
var startTime;
var realTime;
button.onclick = start;
function start(){
button.onclick = null;
button.style.backgroundColor = "red";
out.style.display = "none";
var randomStart = setInterval(function(){
if(Math.random()>0.98) {
wait();
clearInterval(randomStart);
}
console.log("waiting...");
},100);
}
function wait(){
button.onclick = stop;
button.style.backgroundColor = "yellow";
startTime = new Date();
}
function stop(){
button.onclick = start;
button.style.backgroundColor = "rgb(89, 255, 47)";
realTime = new Date();
out.innerText = (realTime - startTime)/1000 +" 초";
out.style.display="block";
}
};
</script>
</head>
<body>
<div id="container">
<output id="out">
누르면 시작
</output>
</div>
</body>
</html>반응형
'web > 코딩' 카테고리의 다른 글
| 웹 html,css,javascript 예제 - 타이머 (0) | 2022.01.08 |
|---|---|
| 웹 (html,css,javascript) 예제 - 무작위로 바뀌는 배경색 (0) | 2022.01.08 |
| 웹 (html, css, javascript) 예제 - 지뢰찾기 게임 (0) | 2022.01.08 |
| 웹 (html,css,javascript) 예제 - 오셀로 게임 (0) | 2022.01.08 |