반응형
Javascript를 이용해 카운트 다운 남은 시간을 표시해주는 예제 입니다.
fn_countDown() 함수에 setInterval()를 이용해 고정된 시간 함수(alertFunc())를 반복적으로 호출하여 사용되고 있습니다.
<HTML 코드>
<tr>
<td id='input_timer'><h2> 2:00 </h2></td>
</tr>
<Javascript 코드>
//카운트 다운 js 시작
var countDown = 60 * 2; //3분?
var myTimer;
function fn_countDown(){
myTimer = setInterval(alertFunc,1000);
}
function alertFunc(){
var min = countDown / 60;
min = Math.floor(min);
var sec = countDown - (60 * min);
//console.log("min : sec = "+min+":"+sec);
if(min.toString().length == 1){
min="0"+min;
}
if(sec.toString().length == 1){
sec="0"+sec;
}
//화면에 보여지는 부분
document.getElementById("input_timer").innerHTML = "남은 시간 : "+min + ":"+sec;
if(countDown == 0){ //카운트다운 종료 시
clearInterval(myTimer);
countDown = 120;
}
countDown--;
var authentication_yn = document.getElementById("authentication_yn").value; //카운트다운 중 인증이 끝나서 종료
if(authentication_yn != ''){
clearInterval(myTimer);
document.getElementById("input_timer").innerHTML = "";
return;
}
if(min == 0 && sec == 0 ){
//console.log("3분 종료");
clearInterval(myTimer);
document.getElementById("input_timer").innerHTML = "";
document.getElementById("phone_number").value = "";
}
}
function countDown_stop(){
countDown = 0;
}[참고자료]
https://developer.mozilla.org/en-US/docs/Web/API/setInterval
setInterval() - Web APIs | MDN
The setInterval() method, offered on the Window and Worker interfaces, repeatedly calls a function or executes a code snippet, with a fixed time delay between each call.
developer.mozilla.org
반응형
'개발 > javascript' 카테고리의 다른 글
| 레이어 팝업, 모달 창이 중앙에서 출력하는 방법 (0) | 2023.05.09 |
|---|---|
| javascript iframe 투명화 allowTransparency 적용 안될 때 (0) | 2020.08.24 |
