본문 바로가기
HTML

Javascript로 디지털 시계 만들기

by treeCoder 2023. 4. 15.

<div id="clock"  style =" font-size : 60px ;" ></div>
<div id="calen"  style =" font-size : 40px ;" ></div>

<script>

function currentTime() {
    const dateInfo  = new Date(); 
    
    let hh = dateInfo.getHours();
    let mm = dateInfo.getMinutes();
    let ss = dateInfo.getSeconds();
    
    hh      = (hh == 0) ? 12      :   hh;
    session = (hh > 12) ? "PM"    : "AM";
    hh      = (hh > 12) ? hh - 12 :   hh;
    
    hh = (hh < 10) ? "0" + hh : hh;
    mm = (mm < 10) ? "0" + mm : mm;
    ss = (ss < 10) ? "0" + ss : ss;
    
    const time = hh + ":" + mm + "  "  + " " + session;
    
    document.getElementById("clock").innerText = time; 
    
    setTimeout(() => currentTime(), 1000);
    
    // --------------- --------------- --------------- -------
    // --------------- date month year weekday --------------- 
    // --------------- --------------- --------------- -------
    
    var year = dateInfo.getFullYear() - 2000;
    var date = dateInfo.getDate();
    
    var weekday = new Array(7);
    weekday[0] = "일";
    weekday[1] = "월";
    weekday[2] = "화";
    weekday[3] = "수";
    weekday[4] = "목";
    weekday[5] = "금";
    weekday[6] = "토";
    
    var months = ["1월", "2월", "3월", "4월", "5월", "6월", 
    "7월", "8월", "9월", "10월", "11월", "12월"];
    var month =months [ dateInfo.getMonth()];
    
    var day_of_week = weekday[dateInfo.getDay()]
    document.getElementById("calen").innerText = `${month} ${date}일 (${day_of_week})`;
}

currentTime();
</script>

'HTML' 카테고리의 다른 글

Javascript에서 Canvas 사용하기  (0) 2021.10.20
HTML 기본 Template  (1) 2021.10.19
Javascript 로 진리표 생성하기  (0) 2021.10.19
Javascript로 2차원 배열 만드는 방법  (0) 2021.10.10
HTML, 진짜 쉬운 스도쿠  (0) 2021.09.29

댓글