JSFiddle - React, Tailwind, and code Playground

HTML

<button type="button" id="btnToggle">시간보기</button>
<!-- date -->
<div id="clock">
  <span id="year">
    <span class="value"></span>년
  </span>
  /
  <span id="month">
    <span class="value"></span>월
  </span>
  /
  <span id="date">
    <span class="value"></span>일
  </span>
  /
  <span id="day">
    <span class="value"></span>요일
  </span>



  <br>

  <!-- time -->
  <span id="hour">
    <span class="value"></span>시
  </span>
  /
  <span id="min">
    <span class="value"></span>분
  </span>
  /
  <span id="sec">
    <span class="value"></span>초
  </span>
  /
  <span id="mSec">
    <span class="value"></span>초 (1/1000)
  </span>
</div>

<div id="notice">버튼을 눌러 시간을 확인할 수 있습니다.</div>

JavaScript

// date 객체(클래스) 생성
function setDate() {

  var date = new Date();
  var strDay = ['일', '월', '화', '수', '목', '금', '토']

  function setHour(num) {
    var setNoon = (num < 11) ? '오전 ' : '오후 ';
    var setHour = (num < 11) ? num : num - 12;

    return setNoon + setHour;
  }
  
  // init text
  // 년(year, 4자리 정수)
  $('#year .value').text(date.getFullYear());
  // 달(month, 1 ~ 12)
  $('#month .value').text(date.getMonth());
  // 일(date, 1 ~ 31)
  $('#date .value').text(date.getDate());
  // 요일(day, 0 ~ 6)
  $('#day .value').text(strDay[date.getDay()]);


  // 시간
  $('#hour .value').text( setHour(date.getHours()) );
  // 분
  $('#min .value').text(date.getMinutes());
  // 초
  $('#sec .value').text(date.getSeconds());
  // 1/1000초
  $('#mSec .value').text(date.getMilliseconds());
  
  setTimeout(function(){
   	var noticeEle = $('#notice');
    var isOn = $('#clock').hasClass('on');
    if (isOn) {
    	$('#notice').text('시간이 출력되고 있습니다.');
    	setDate();
    }else{
    	$('#notice').text('버튼을 눌러 시간을 확인할 수 있습니다.');
    }
  }, 1000);
  
};

$('#btnToggle').on('click', function(){
  var isOn = $('#clock').hasClass('on');
  if (isOn) {
  	$('#clock').removeClass('on');
  }else{
  	$('#clock').addClass('on');
    setDate();
  }
  
});