CHAPTER 2 042 문자열 길이 맞추기

하유민·2021년 1월 29일

JavaScript

📚 JavaScript Code Recipe

목록 보기

7/8

문자열.padStart(전체길이,[추가문자열])

: 문자열 시작 부분에 문자열 추가

문자열.padEnd(전체길이,[추가문자열])

: 문자열 끝 부분에 문자열 추가

예시

'5'.padStart(2, '0') //길이 2 0 추가 결과 05

[현재시각 표시]

HTML

<body>
    <span class="hour"></span> 시
    <span class="minute"></span> 분
    <span class="second"></span> 초
</body>

Javascript

// 시간
const hourElement = document.querySelector('.hour');
// 분
const minuteElement = document.querySelector('.minute');
//초
const secondElement = document.querySelector('.second');

//update 함수 실행. 
update();

// 현재시간 표기 

function update() {
    const currentTime = new Date();

    // 시간 단위 표기
    const hour = currentTime.getHours();
    hourElement.innerText = addZeroPadding(hour);

    // 분단위 표기
    const minute = currentTime.getMinutes();
    minuteElement.innerText = addZeroPadding(minute);

    //초단위 표기 
    const second = currentTime.getSeconds();
    secondElement.innerText = addZeroPadding(second);

    // 자기 자신을 불러와 update  값이 바뀔 때마다 함수가 재실행됨. 리뉴얼 계속 돼서 실시간으로 보임. 
    requestAnimationFrame(update);
}

// num 으로 시, 분, 초 모두 가져온다.
// 파라미터 num 이 10 미만의 한 자리 숫자면 앞에 0을 붙인 문자열을 반환 . 
function addZeroPadding(num) {
    return String(num).padStart(2, '0');
}