728x90
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* { margin: 0 auto; box-sizing: border-box;}
body { text-align: center; }
#Box { border: solid 6px rgb(243, 204, 167);
width:250px; height: 200px;
border-radius: 15%;
background-color:rgb(241, 168, 100)}
#timer { margin-top: 30px;
width:70%; height: 100px;
border: solid 1px #b9b0b0;
border-radius: 10%;
background-color: #d1cece;}
p { padding-top: 25px;
text-align: center;
font-weight: bold;
font-size: xx-large;}
#buttonBox { border: dashed 2px rgb(243, 204, 167);
border-radius: 15%;
text-align: center;
width:100%; height: 30px;
margin-top:40px;}
</style>
</head>
<body>
<div id="Box">
<div id="timer">
<p>
<span id="minid">00</span>:<span id="secid">00</span>:<span id="msid">00</span>
</p>
<div id="buttonBox">
<button onclick="startf()">Start</button>
<button onclick="stopf()">Stop</button>
<button onclick="resetf()">Reset</button>
</div>
</div>
</div>
<script>
let ms = 0;
let sec = 0;
let min = 0;
const putinmsid = document.getElementById("msid");
const putinsecid = document.getElementById("secid");
const putinminid = document.getElementById("minid");
let time; //var는 안됨, why???
function startf() {
clearInterval(time); // 초기화
time = setInterval(run, 10);
}
function run () {
ms++;
if(ms <= 9){
putinmsid.innerHTML = "0" + ms; // "0" 두자릿수를 표현하기 위함.
}
if (ms > 9){
putinmsid.innerHTML = ms;
}
if (ms > 99) {
ms = 0;
sec++;
putinsecid.innerHTML = "0" + sec;
}
if (sec > 9){
putinsecid.innerHTML = sec;
}
if (sec > 59){
min++;
putinminid.innerHTML = "0" + min;
sec = 0;
}
if (min > 9){
putinminid.innerHTML = min
}
if (min > 59){
min = 0;
}
}
function stopf() {
clearInterval(time);
}
function resetf() {
clearInterval(time); //초기화
ms = "00";
sec = "00";
min = "00";
putinmsid.innerHTML = ms;
putinsecid.innerHTML = sec;
putinminid.innerHTML = min;
}
</script>
</body>
</html>'일단 해보는 코딩 > Project' 카테고리의 다른 글
| [3일차] MBTI 테스트 프로그램만들기 (0) | 2023.05.10 |
|---|---|
| [2일차] MBTI 테스트 프로그램만들기 (2) | 2023.05.08 |
| [1일차] vscode 세팅부터 MBTI 테스트 프로그램만들기 (0) | 2023.04.26 |
| [Java Script] 계산기 프로젝트(2) (0) | 2022.07.07 |