<!DOCTYPE html>
<html lang="en">
<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>타이머 함수</title>
<style>
#time {
display: flex;
justify-content: center;
align-items: center;
}
input {
height: 50px;
width: 200px;
border-radius: 100pt;
border: 3px solid forestgreen;
font-size: 20pt;
}
button {
background-color: forestgreen;
width: 70px;
height: 70px;
border-radius: 10pt;
font-size: 20pt;
margin-left: 30px;
}
.main {
text-align: center;
display: grid;
justify-content: center;
align-items: center;
}
.timer {
font-size: 90px;
}
.main h1 {
font-size: 3rem;
}
.dd {
display: flex;
justify-content: center;
}
.dd1 {
display: grid;
align-items: end;
}
</style>
</head>
<body>
<div id="time">
<h1>시간 설정</h1><label for=""><input class="input" type="text" placeholder="초 입력"></label><button class="button">시작</button>
</div>
<div class="main">
<h1>남은시간</h1>
<div class="dd">
<span class="timer">0</span> <span class="dd1" style="font-size: 20pt;">S </span>
</div>
<h2>초 입력하고 버튼을 누르면, 입력한 시간대로 타이머가 작동한다</h2>
</div>
<script>
let 버튼 = document.querySelector(".button")
let 인풋박스 = document.querySelector(".input")
let 타이머 = document.querySelector(".timer")
let 종료
버튼.addEventListener("click", function () {
clearInterval(종료)
let 남은시간 = 인풋박스.value
종료 = setInterval
(function 타이머계산() {
타이머.innerHTML = 남은시간
남은시간 -= 1
console.log(남은시간)
if (남은시간 < 0) {
clearInterval(종료)
}
}, 1000)
})
</script>
</body>
</html>
꿈꾸는 개발자