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

[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분입니다. 4월 22일은 지구의 날입니다!" }

시간을 구현하기 위해 SetInterval함수를 작성하였다.

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

JacaScript에 날짜 라이브러리가 내장되어있으므로

Date 라이브러리를 이용하여

년, 월, 일, 시, 분, 초를 구할 수 있다.

프로젝트를 구현하기 위해 필요한 것은

월, 일, 시, 분이므로 각자 입력해주었다.

여기서 주의할 점은 월은 0부터 시작하므로 1을 더해준다.

지구의 날인 4월 22일에는

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

4시 22분일때에는

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

from http://seongyeoni.tistory.com/63 by ccl(A) rewrite - 2021-10-03 12:27:22