- 프론트엔드 공부 07일차 -
06일차 인증번호 생성기와 타이머를 만들어보았다. 하지만 해당 코드에서 인증번호 전송을 여러번 누르면 인증번호가 계속 생성되고 타이머는 꼬이는 오류가 생기게 되었다.
이를 해결하기 위해 그때 이용한 html은 그대로 사용하고 js만 수정해보았다.
let isStarted = false;
const createNum = () => {
if(isStarted === false){
//타이머가 작동중이지 않을때
isStarted = true
document.getElementById("completebtn").disabled = false
const num = String(Math.floor(Math.random() * 1000000)).padStart(6,0)
document.getElementById("num").innerText = num
let time = 180
let timer
timer = setInterval(function(){
if(time >= 0) {
let min = Math.floor(time / 60)
let sec = String(time % 60).padStart(2,0)
document.getElementById("timer").innerText = min + ":" + sec
time = time - 1
}else{
document.getElementById("completebtn").disabled = true
isStarted = false
clearInterval(timer)
}
},1000)
}else{
//타이머가 작동중일때
}
}타이머가 작동 작동하는지 판별하기 위해 let isStarted = false; 을 사용하였다
false 일 경우 타이머가 작동하지 않고 인증번호 전송 버튼을 누르면 isStarted 가 true로 바뀌도록 하였다.
clearInterval(timer) 을 사용함으로써 setInterval 함수가 반복되는 것을 방지하였다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>Document</title>
<script src="./07-signup.js"></script>
</head>
<body>
<input type="text" id="email" oninput="checkValidation()">
<input type="password" id="pw1" oninput="checkValidation()">
<input type="password" id="pw2" oninput="checkValidation()">
<button id="submit" disabled="true">회원가입</button>
</body>
</html>const checkValidation = function() {
let email = document.getElementById("email").value
let pw1 = document.getElementById("pw1").value
let pw2 = document.getElementById("pw2").value
if(email !== "" && pw1 !== "" && pw2 !== "") {
document.getElementById("submit").disabled = false
}else{
document.getElementById("submit").disabled = true
}
}
간단한 회원가입 예제.
이메일과 PW 를 모두 입력해야 회원가입 버튼이 활성화되는 코드이다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>Document</title>
<script src="./08-phone.js"></script>
</head>
<body>
<input type="text" id="p1" oninput="changeFocus1(); numbtnOn();" maxlength="3">-
<input type="text" id="p2" oninput="changeFocus2(); numbtnOn();" maxlength="4">-
<input type="text" id="p3" oninput="numbtnOn()" maxlength="4">
<div id="num">000000</div>
<button id="numbtn" onclick="createNum()" disabled="true">인증번호 전송</button>
<div id="timer">3:00</div>
<button id="finishbtn" disabled="true">요청 완료</button>
</body>
</html>const changeFocus1 = () => {
let phone1 = document.getElementById("p1").value
if(phone1.length === 3){
document.getElementById("p2").focus()
}
}
const changeFocus2 = () => {
let phone2 = document.getElementById("p2").value
if(phone2.length === 4){
document.getElementById("p3").focus()
}
}
const numbtnOn = () => {
let phone1 = document.getElementById("p1").value;
let phone2 = document.getElementById("p2").value;
let phone3 = document.getElementById("p3").value;
if((phone1.length === 3) && (phone2.length === 4) && (phone3.length === 4) ){
document.getElementById("numbtn").disabled = false
}else{
document.getElementById("numbtn").disabled = true
}
}
let isStarted = false;
const createNum = () => {
if(isStarted === false){
isStarted = true
document.getElementById("finishbtn").disabled = false
const num = String(Math.floor(Math.random()*1000000)).padStart(6,0)
document.getElementById("num").innerText = num
let time = 180
let timer
timer = setInterval(function(){
if(time >= 0){
let min = Math.floor(time/60)
let sec = String(time%60).padStart(2,0)
document.getElementById("timer").innerText = min + ":" + sec
time = time - 1
}else{
document.getElementById("finishbtn").disabled = true
isStarted = false
clearInterval(timer)
}
},1000)
}else{
}
}
휴대전화 번호 입력 시 인증번호 전송 버튼이 활성화되도록 작성한 코드이다.
또한 전화번호를 입력할때 각각 3자리, 4자리를 입력하면 자동으로 다음 칸으로 이동하도록 작성하였다.
'프론트엔드 공부 > html 기초' 카테고리의 다른 글
| 06일차 프론트엔드 공부 - 기초 JS 3 (2) | 2024.09.04 |
|---|---|
| 05일차 프론트엔드 공부 - 기초 JS 2 (0) | 2024.09.04 |
| 04일차 프론트엔드 공부 - 기초 JS (1) | 2024.09.04 |
| 02일차 프론트엔드 공부 -CSS의 기초 (1) | 2024.09.04 |
| 01일차 프론트엔드 공부 -HTML의 기초 (1) | 2024.09.04 |