HTML with 자바스크립트/시계

HTML 시계

kkedory 2023. 5. 19. 15:39
728x90

clock_001.html
0.00MB

<!DOCTYPE html>
<html>

<body>
    <h1 class = "h1-date"></h1>
    <h1 class = "h1-clock"></h1>
   
    <script>
        const clock = document.querySelector('.h1-clock');
        const date = document.querySelector('.h1-date');

        function getTime(){
            const time = new Date();
            const hour = time.getHours();
            const minutes = time.getMinutes();
            const seconds = time.getSeconds();
           
            var year = time.getFullYear();
            var month = time.getMonth()+1;
            var day = time.getDate();
            //clock.innerHTML = hour +":" + minutes + ":"+seconds;
            clock.innerHTML = `${hour<10 ? `0${hour}`:hour} : ${minutes<10 ? `0${minutes}`:minutes} : ${seconds<10 ? `0${seconds}`:seconds}`;
            date.innerHTML = year + "년 " + month + "월 " + day + "일";
        }


        function init(){
            setInterval(getTime, 1000);
        }

        init();

    </script>
   
</body>
</html>
728x90