[HTML/CSS/JavaScript] 실시간 시계 제작

Javascript를 이용해서 웹에 실시간 시계를 구현하는 코드를 설명하겠다.

---

 

 

위 시계는 자바스크립트를 이용한 코드로 구현된 시계이다.
세 가지 방법에 대해서 소개하겠다.

1. if 조건문을 이용하여 만드는 방법
2. 조건부 연산자를 이용하여 만드는 방법
3. 조건부 연산자와 백틱을 이용하여 만드는 방법

세 가지 방법은 대부분의 틀은 동일한데 시각 형식(YYYY-MM-DD HH:MM:SS)을 출력하기 위해
전처리 과정을 거칠 때만 다르다.
따라서 우선 첫 번째 방법으로 만드는 코드를 설명하고,
조건부 연산자를 이용하는 방법과
백틱까지 이용하여 만드는 방법을 추가적으로 소개하겠다.

---

먼저 html 파일에서 h1 스타일의 시계가 표현될 time 이라는 이름의 클래스를 할당한다.

<h1 class="time"></h1>

그리고 <script>에서 또는 js 파일에서 아래와 같은 코드를 작성한다.

let now; 
let year; 
let month; 
let day; 
let hour; 
let minute; 
let second; 
function timeInfo(){ 
  now=new Date(); 
  year=now.getFullYear(); 
  month=now.getMonth()+1; 
  day=now.getDate(); 
  hour=now.getHours(); 
  minute=now.getMinutes(); 
  second=now.getSeconds(); 
}

now 변수와 연, 월, 일, 시, 분, 초 값을 할당할 변수를 생성한다.
(변수가 재선언 되지 않도록 let을 이용했다. var을 사용해도 된다.)
여기서 now는 후에 현재 시각 정보를 가져올 변수로 사용된다.
현재 시각을 할당할 변수를 생성하였으니
현재 시각을 가져올 수 있는 timeInfo() 함수를 만든다.

new Date()

timeInfo() 함수 내의 new Date()는 콘솔에서 실행해보면
다음과 같이 현재 시각을 가져온다.

그 이외에도 new Date().getFullYear(), newDate.getMonth() 등을 입력해보면

각 값이 숫자에 할당되어 나오는 것을 알 수 있다.
시각도 한국 시각(GMT+0900)에 맞추어 출력되는 것도 알 수 있다.
기억해야할 특징은 getMonth()가 날짜, getDay()가 요일을 출력할 때
월은 0~11 (1~12)
요일은 0~6 (일~토)
즉 getMonth() 와 getDay() 는 0부터 값을 할당하는 것을 알 수 있다.

우리는 요일을 제외한 YYYY-MM-DD HH:MM:SS 형태의 시계를 출력할 것이기 때문에

new Date().getMonth()+1;

+1 을 통해 getMonth()가 0부터 값을 할당하는 것을 처리한다.

다시 코드를 가져오면

let now; 
let year; 
let month; 
let day; 
let hour; 
let minute;
let second; 
function timeInfo(){ 
  now=new Date(); 
  year=now.getFullYear(); 
  month=now.getMonth()+1; 
  day=now.getDate(); 
  hour=now.getHours(); 
  minute=now.getMinutes(); 
  second=now.getSeconds(); 
}

이를 통해 timeInfo() 함수를 실행하면 현재 시각 정보가 각 변수에 할당된 상태가 된다.
하지만 이대로 시계를 출력하면 아래와 같은 문제가 발생한다.

 

우리가 원하던 YYYY-MM-DD HH:MM:SS 형식의 시계가
월, 일, 시, 분, 초 값이 10보다 작을 때 일의 자리만 표현이 되어버리는 것이다.

이를 위해 처리 과정을 거친다.

function currentTime(){ 
  timeInfo(); 
  let clockMonth=month; 
  let clockDay=day; 
  let clockHour=hour; 
  let clockMinute=minute; 
  let clockSecond=second; 
  if(month<10){ 
    clockMonth='0'+month; 
  } 
  if(day<10){ 
    clockDay='0'+day; 
  } 
  if(hour<10){ 
    clockHour='0'+hour; 
  } 
  if(minute<10){ 
    clockMinute='0'+minute; 
  } 
  if(second<10){ 
    clockSecond='0'+second; 
  } 
  document.querySelector(".time").innerHTML = year+"-"+clockMonth+"-"+clockDay+" "+clockHour+":"+clockMinute+":"+clockSecond; 
}

월, 일, 시, 분, 초에 대하여 if 문을 통하여 이들 중 10보다 작은 값은
새 변수에 앞에 0을 붙이도록 설정하는 것이다.

document.querySelector(".time").innerHTML

이는 time 클래스를 선택해서 해당 클래스에 내가 원하는 내용을 넣도록 한다.
이를 이용해 time 클래스에 현재 시각을
YYYY-MM-DD HH:MM:SS 형태로 표현되도록 하고
setInterval(function, t) 함수를 이용하여
1초마다 currentTime() 함수를 반복하도록 하면 된다.
setInterval 은 function 자리에 있는 함수를 t(ms)마다 반복하게 한다. (1s=1000ms 이다.)

function clock(){ 
  currentTime(); 
  setInterval(currentTime,1000); 
} 

clock();

clock 함수를 정의하여 setInterval 함수를 실행하도록 하고,
clock(); 을 통해 이를 작동시킨다.

위는 방법 1의 전체 코드이다.

---

여기서 처리 과정의 currentTime() 함수를
조건부 연산자 ? 를 통해서 다음과 같이 수정할 수 있다.

function currentTime(){
  timeInfo(); 
  let clockMonth=(month<10) ? "0"+month:month; 
  let clockDay=(day<10) ? "0"+day:day; 
  let clockHour=(hour<10) ? "0"+hour:hour; 
  let clockMinute=(minute<10) ? "0"+minute:minute; 
  let clockSecond=(second<10) ? "0"+second:second; 
  document.querySelector(".time").innerHTML = year+"-"+clockMonth+"-"+clockDay+" "+clockHour+":"+clockMinute+":"+clockSecond; 
}

조건부 연산자는 다음과 같은 양식으로 구성된다.
(조건문) ? True일 경우 실행문 : False일 경우 실행문
조건을 만족할 경우 왼쪽의 0을 붙이는 실행문이, 만족하지 않을 경우 그대로 출력한다.

위는 방법 2의 전체 코드이다.

---

여기에 백틱(`)을 이용하면 새로운 변수 자체도 선언할 필요가 없다.
(백틱은 키보드 '~' 자리에 있다.)

function currentTime(){ 
  timeInfo(); 
  document.querySelector(".time").innerHTML =`${year}-${month<10 ? `0${month}`:month}-${day<10 ? `0${day}`:day} ${hour<10 ? `0${hour}`:hour}:${minute<10 ? `0${minute}`:minute}:${second<10 ? `0${second}`:second}` 
}

백틱을 사용하면 변수와 문자열을 별도의 + 기호 없이 같이 사용할 수 있다.
사용 방법은 백틱 내에 (` `) 문자열은 그대로 적고
변수는 자리 표시자인 ${ } 내에 넣어서 사용한다.
자리 표시자 내에서 조건부 연산자도 사용할 수 있기 때문에
${month<10 ? `0${month}`:month}
와 같이 ${조건문 ? True일 경우 실행문 : False일 경우 실행문}
형태로 넣고 `0${month}`와 같이
백틱 내에서도 0과 month를 + 기호를 써서 사용해야 하는 경우를
백틱을 반복해서 사용해준다.
하지만 백틱을 사용하는 방법은 일부 브라우저에서 작동하지 않을 수 있다.

위는 방법 3의 전체 코드이다.