[JavaScript / jQuery] 웹페이지에 실시간으로 연월일 날짜, 시간 띄우기

웹사이트 하단에 위와 같은 구성의 시간 요소 넣는 것을 구현해보았다

 

HTML

    <div class="time-bar">

        <div>

            <div id="time-bar-top">오후 1:25</div>

            <div id="time-bar-bottom">2023-12-20</div>

        </div>

    </div>

 

 

Script

    function timeSetting() {

        let date = new Date();

        let hours = date.getHours();

        let minute = String(date.getMinutes()).padStart(2, '0');

        if (hours < 12) {

            if (hours == 0) hours = 12;

            $('#time-bar-top').text('오전 ' + hours + ':' + minute)

        }

        else {

            hours -= 12;

            if (hours == 0) hours = 12;

            $('#time-bar-top').text('오후 ' + hours + ':' + minute)

        }

        $('#time-bar-bottom').text(

            date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate()

        );

    }

    timeSetting();

    setInterval(timeSetting, 1000);

 

new Date()로 객체를 생성하면 해당 시점의 날짜와 시간 값이 date 변수 안에 들어있게 된다

오전/오후로 나누어 출력할 것이기 때문에 hours와 minute은 미리 변수로 빼두었다

 

오전/오후 구별해서 출력

getHours()로 받아오는 시간은 0~23 사이의 값을 갖기 때문에 12를 기준으로 오전/오후를 나눠주었다

 

getHours() 값이 0인 경우는 오전 12시이기 때문에 if문을 넣어서 값이 0일 경우 12로 변경해주었다

getHours() 값이 12 이상인 경우는 오후인데, 12시간 표기로 보여주고 싶어서 hours에서 12를 빼주었다

 

getHours() 값이 12인 경우 오후 12시이기 때문에, 12를 빼면 0이 된다

따라서 이 경우에도 if문을 넣어서 값이 0인 경우는 12로 변경해주었다

 

+) 물론 toLocalString() 함수를 이용하면 한번에 오전/오후 구별되어 출력시킬 수도 있긴 한데, 원하는 포맷으로 수정하는 거나 직접 나열하는 거나 거기서 거기일 것 같아서 그냥 직접 나열하였다

 

실시간 반영

웹사이트 새로고침을 하지 않고도 실시간으로 반영시켜주고 싶어서 setInterval(함수명, 지연시간)을 이용해서 1초마다 timeSetting을 다시 하도록 설정해주었다

setInterval 위에 timeSetting()을 한번 실행시켜 주지 않으면 로딩 되고 1초 뒤에 timeSetting이 웹사이트에 반영되기 때문에 가장 처음에 함수를 실행시켜주었다

 

분이 10 미만일 경우 한 자리수만 출력되는 문제

getMinutes()값은 0~59 사이의 값이기 때문에 당연히 한 자리수의 수가 출력될 수 있다...

원하는 모양새가 아니었기 때문에 수정을 해줬다

padStart(2, '0')를 이용하면 2자리가 될 때까지 start(왼쪽)에 0을 채워넣어준다

단, getMinutes()으로 받은 값은 string 형이 아니기 때문에 위의 코드처럼 string 형으로 변환해주고 .padStart() 함수를 사용해주면 된다