js es6 연습용 시계 만들기

new Date()와 setInterval을 활용한 정말 간단한 시계 만들기다

 

우선 html

<div id="sample">
  <div class="text-center">
  	<h3>Simple Clock</h3>
  	<h1 id="clockViewer"></h1>
  </div>
</div>

 

다음은 js css는 생략

const clockView = document.querySelector("#clockViewer");

let init = () => {
  getTime();
  setInterval(getTime, 1000);
};

let getTime = () => {
  let clock = new Date();
  let hour = clock.getHours();
  let minute = clock.getMinutes();
  let second = clock.getSeconds();
  if (hour < 10) {
    hour = "0" + hour;
  }
  if (minute < 10) {
    minute = "0" + minute;
  }
  if (second < 10) {
    second = "0" + second;
  }
  clockView.innerHTML = hour + " : " + minute + " : " + second;
};

 

만들때마다 하나씩 정리해서 올려두어야겠다.