jQuery 실시간 시분초 출력방법

시/분/초를 실시간으로 페이지에 표시하는 방법으로 jquery를 이용하는 방법입니다.
13시부터 24시간제를가 아닌 12시간제로 변경하는 부분과 13시부터 오후를 표시하는 부분 그리고 10보다 작는 시간 단위(시,분,초)는 앞에 0을 붙여주는 것만 알고 계시면 되겠습니다. 

아래 코드를 </head>이전에 붙여 넣어주고

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  function currentTime() {
    var today = new Date();//오늘 날짜(년,월,일,요일,시,분,초)
    var Hours = today.getHours();//시
    var Minutes = today.getMinutes();//분
    var Seconds = today.getSeconds();//초
    var session = "AM";//기본 오전

    if(Hours == 0){//0시면 오전
        Hours = 12;
    }
    if(Hours > 12){//13시부터 12시간제로 변경
        Hours = Hours - 12;
        session = "PM";
    }

    // 10보다 작은 시간단위는 앞에 0붙이기 (6 -> 06)
    Hours = (Hours < 10) ? "0" + Hours : Hours;
    Minutes = (Minutes < 10) ? "0" + Minutes : Minutes;
    Seconds = (Seconds < 10) ? "0" + Seconds : Seconds;

    var clock = Hours + ":" + Minutes + ":" + Seconds + " " + session;
    $("#clock").text(clock); // id가 clock인 요소에 시간 표시
  }

  setInterval(currentTime, 1000); // 1초마다 currentTime 함수 실행
});
</script>

실시간 시계가 표시되고 싶은 부분에 아래 소스를 붙여넣기 해줍니다.

<div id="clock"></div>