반응형
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Timer</title>
<style>
*{
margin:0;
padding:0;
}
body{
background-color: black;
}
#container{
margin-top:200px;
margin-left: auto;
margin-right:auto;
width:90%;
height:250px;
background-color: rgb(89, 255, 47);
text-align: left;
padding-left: 400px;
}
#out{
line-height:250px;
font-size:200px;
}
</style>
<script>
window.onload = function(){
var btn = document.getElementById("container");
var out = document.getElementById("out");
var time;
var realTime;
btn.onclick = start;
function start(){
btn.onclick = stop;
time = new Date();
btn.style.backgroundColor = "red";
realTime = setInterval(setRealTime,33);
}
function stop(){
clearInterval(realTime);
btn.onclick = start;
btn.style.backgroundColor = "rgb(89, 255, 47)";
}
function setRealTime(){
var nowTime = new Date();
out.innerText = (nowTime- time)/1000;
}
};
</script>
</head>
<body>
<div id="container">
<output id="out">
0.00
</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 |