| 회원가입 인증 번호 시간 타이머 제작하기 |
| 1. 회원가입 인증 번호 시간 타이머 제작하기. 2, 회원가입 특정 시간 도달 시 인증 버튼 없애기. 3. 회원가입 특정 시간이 0초인 경우 인증 완료 버튼 비활성화 및 색상 변경하기. |
- setInterval 내장 함수를 이용하여 타이머를 제작하기.
- 초에서 남은 분과 남은 초를 모두 계산하여, 화면에 보여줘야 한다.
- 특정 시간이 되면 버튼을 비활성화하기.
1. 제작 방식
회원가입 인증 번호 시간 타이머를 제작하기 위해서는 dom을 조작하여 화면에 있는 숫자를 변경해야 한다.
180초 // 3분
179초 // 2분 59초
178초 // 2분 58초
.
.
.
- 인증번호 받는 버튼을 누르는 동시에 3분 부터 카운트 시작하기.
- 남은 시간을 분, 초로 환산하여 변수에 할당하고 화면에 보여주기.
- 0이 되는 시점에서 종료하기.
3가지 로직을 기억하면서 코드를 작성하면 된다. 항상 코드를 작성하기 전에 어떤 것이 필요할 지 고민하는 연습을 하자.
2. 회원가입 인증 번호 시간 타이머 제작하기
- 위의 기본 로직을 이용하면 된다.
3. 회원가입 특정 시간 도달 시 인증 버튼 없애기
- 위의 기본 로직에 style.display의 속성을 이용하면 된다. 값에 "none" 을 넣어주면 인증 버튼이 해당 시간에 도달할 때에 버튼이 사라지게 된다.
4. 회원가입 특정 시간이 0초인 경우 인증 완료 버튼 비활성화
- 위의 기본 로직에 disabled의 속성을 이용하면 된다.
4-1. html 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<title>회원가입</title>
<script src="./06-timer.js" defer></script>
<link rel="stylesheet" href="./06-timer.css" />
</head>
<body>
<div class="container">
<h3 class="header">회원가입</h3>
<div class="wrapper">
<input class="input" type="email" placeholder="codecamp@gamil.com" />
<div class="wrapper__middle">
<input class="input" type="tel" placeholder="010-1234-5678" />
<button class="get__number" onclick="takeTarget()">
인증번호 받기
</button>
</div>
<div class="wrapper__bottom">
<input
class="input__target"
type="text"
maxlength="6"
placeholder="123456"
/>
<span class="target__time">
<span id="remaining__min">3</span> :
<span id="remaining__sec">00</span>
</span>
<button class="complete__target" id="complete">인증완료</button>
</div>
</div>
<button class="join__btn">가입하기</button>
</div>
</body>
</html>4-2. css 코드
* {
box-sizing: border-box;
margin: 0px;
}
html,
body {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.container {
width: 450px;
height: 280px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 20px;
}
.wrapper {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 20px;
}
.wrapper__middle {
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
}
.get__number {
width: 50%;
height: 40px;
border: 1px solid #83dcb7;
color: #83dcb7;
border-radius: 5px;
margin-left: 8px;
background-color: white;
}
.wrapper__bottom {
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.target__time {
display: flex;
flex-direction: row;
margin-left: 10px;
font-weight: 700;
}
.input {
width: 100%;
height: 40px;
padding: 5px;
border: 1px solid #c4c4c4;
border-radius: 5px;
}
.input__target {
width: 65%;
height: 40px;
padding: 5px;
border: 1px solid #c4c4c4;
border-radius: 5px;
}
.complete__target {
height: 40px;
background-color: #83dcb7;
border: 1px solid #c4c4c4;
border-radius: 5px;
font-weight: 700;
color: white;
padding: 10px;
}
.join__btn {
width: 90%;
height: 40px;
background-color: #83dcb7;
border: 1px solid #c4c4c4;
border-radius: 5px;
font-weight: 700;
color: white;
padding: 10px;
}4-3. javascript 코드
const remainingMin = document.getElementById("remaining__min");
const remainingSec = document.getElementById("remaining__sec");
const completeBtn = document.getElementById("complete");
// 굳이 ms로 변경할 필요가 없다. 계산하기 더 불편하고 할 이유가 없다.
// 항상 상황에 따라서 달라진다.
let time = 180;
const takeTarget = () => {
setInterval(function () {
if (time > 0) { // >= 0 으로하면 -1까지 출력된다.
time = time - 1; // 여기서 빼줘야 3분에서 3분 또 출력되지 않고, 바로 2분 59초로 넘어간다.
let min = Math.floor(time / 60);
let sec = String(time % 60).padStart(2, "0");
remainingMin.innerText = min;
remainingSec.innerText = sec;
// time = time - 1
} else {
completeBtn.disabled = true;
}
}, 1000);
};5. 회원가입 특정 시간이 0초인 경우 인증 완료 버튼 비활성화 및 색상 변경하기
- 위의 기본 로직에 disabled와 style.backgroundColor의 속성을 이용하면 된다.
'web > javascript 기초' 카테고리의 다른 글
| [javascript] 회원가입 폼 오류 수정하기 (0) | 2023.03.06 |
|---|---|
| [javascript] 함수 (0) | 2023.03.04 |
| [javascript] Dom (0) | 2023.03.03 |
| [javascript] 수학 객체 (0) | 2023.03.03 |
| [javascript] 반복문 (0) | 2023.03.03 |