[JavaScript] 남은시간 표현하는 함수 만들기 (카운트 다운)

 

---

남은시간 표현 (시, 분, 초)

 

 학습 진행 시간이나 카운트다운에서 주로 사용되는 형식으로 하단 작성해둔 함수를 통해 쉽게 표현할 수 있다. 아래에서 사용된 형식은 [시간 : 분 : 초] 이며 초단위 값을 받아 String 또는 Array 형태로 반환할 수 있도록 작성해두었다. 이를 응용하면 다양한 방식의 표현이 가능하니 알아두면 좋다.

 

함수

function calcTime(time, type='') {    
    let setHour;    
    let setMin = 0;    
    let setSec = 0;    
    let setText = "";    
    let setArray = []    
    time = parseInt(time);    
    const cutMin = Math.floor(time / 60);    

    if (cutMin >= 60) {        
        setHour = Math.floor(cutMin / 60);        
        setMin = cutMin % 60;    
    } else {        
        setMin = 0;        
        setMin = cutMin;    
    }    

    setSec = time % 60;    
    if (typeof setHour !== "undefined") {        
        if (setHour < 10) {            
            setText = "0" + setHour + ":";        
        } else {            
            setText = setHour + ":";        
        }    
    } else {        
        setText = "";    
    }    

    if (setMin < 10) {        
        setText += "0" + setMin + ":";    
    } else {        
        setText += setMin + ":";    
    }    

    if (setSec < 10) {        
        setText += "0" + setSec;    
    } else {        
        setText += setSec;    
    }    

    setArray.hour = setHour;    
    setArray.minute = setMin;    
    setArray.second = setSec;    

    if(type === '') {        
        return setText;    
    } else {        
        return setArray;    
    }
}

 

예제

console.log(calcTime(90));
// 01 : 30 - 1분30초
console.log(calcTime(6030));
// 01 : 40 : 30 - 1시간40분30초

 

 따로 작성하진 않았지만 setInterval 함수를 통해 카운트 다운도 쉽게 처리가 가능하다.