[JavaScript] 시간 및 이벤트성 코드

팀 프로젝트를 구현하면서
지구의 날인 4월 22일을 기억하자는 의미를 가지고 시간과 해당 날에 특별한 이벤트를 주기로 하였다.

구현한 코드는 다음과 같다.

setInterval(function () {
  var time = new Date().getHours() >= 12 ? "PM " : "AM "
  time += new Date().getHours() >= 13 ? new Date().getHours() - 12 : new Date().getHours();
  time += " : " + new Date().getMinutes();
  // time += new Date().getHours() + ":" + new Date().getMinutes(); // 13~24시 표현
  document.getElementById("clock").innerHTML = time;
}, 1000);
var month = new Date().getMonth() + 1;
var day = new Date().getDate();
var hour = new Date().getHours();
var minute = new Date().getMinutes();
if (month == 4 && day == 22) {
  var ele = document.getElementsByClassName("backimage")[0];
  ele.style.backgroundImage = "url(images/background_home_dark.jpg)"
}
else{
}
if (hour == 16 && minute == 22 || hour == 4 && minute == 22) {
  document.getElementById("event_text").innerHTML = "현재 시간은 4시 22분입니다.<br> 4월 22일은 지구의 날입니다!"
}

시간을 구현하기 위해 SetInterval함수를 작성하였다.
시간은 1초마다 흐르기때문에 실시간으로 시간을 표현하기 위해서는 SetInterval 함수를 이용해주어야한다.

JacaScript에 날짜 라이브러리가 내장되어있으므로
Date 라이브러리를 이용하여
년, 월, 일, 시, 분, 초를 구할 수 있다.

프로젝트를 구현하기 위해 필요한 것은
월, 일, 시, 분이므로 각자 입력해주었다.
여기서 주의할 점은 월은 0부터 시작하므로 1을 더해준다.
시간을 AM과 PM으로 표현해주기 위해 삼항연산자를 이용하여 시간이 12보다 클 경우와 아닐 경우를 나누었다.

지구의 날인 4월 22일에는

이렇게 불이 조금씩 켜져있던 지구가 불이 다 꺼진 지구로 바뀐 것을 볼 수 있다.

4시 22분일때에는

위와 같이 문구를 출력하여 지구의 날을 기억할 수 있도록 프로젝트를 구현하였다.