시간에 따라 상태가 변하는 Javascript, JQuery

계기

• 팀을 소개하는 미니프로젝트를 진행하는 도중, 게임 테마와 비슷해보이게 하기 위해서 시간이 지나면 체력이 방전되는 아이디어를 팀원과 논의했었다.
• 처음에는 Progress Bar를 활용했지만, 조금 더 직관적인 그래픽 디자인을 사용하기로 추가로 논의했다.
• 그래서 HP, MP 게임 이미지를 준비해 시간마다 체력이 떨어지는 효과를 내기 위한 코드를 작성했다.

JAVASCRIPT 기능

1. $(document).ready(function(){}) 활용

   • $(document).ready(function(){}) 은 클라이언트를 시동하면서 바로 시작하게 해주는 기능으로 다른 처리를 해 줄 필요 없이 바로 기능을 사용할 수 있다.
   • 클라이언트를 시동할 때마다 기능이 필요하기 때문에 함수를 $(document).ready(function(){})에 넣어준다.

   $(document).ready(function () {  
       now_status(), sizing()  
   })
   
   function now_status(){}
   function sizing(){}

2. Date(), getHours() 활용

   • Date()는 현재 날짜 및 시각을 받아오는 함수로 지금 시각을 받아오는데 사용한다
   • getHours()는 Date() 에서 시각만을 가져오는 함수로 현재 오후 1시라면 13을 가져온다.
   • Date(), getHours() 속성을 활용하여 클라이언트가 시동될 때마다, 시각 값을 가져오고 시간이 지날수록 변화되는 속성을 추가하는데 사용할 것이다.

   function now_status() {  
     let today = new Date();  
     let hours = today.getHours();  
     console.log(hours)  

3. removeClass, addClass 활용

   • removeClass() 는 선택한 클래스의 클래스 속성을 지우는 속성이다.
   • addClass() 는 선택한 클래스의 클래스 속성을 추가하는 속성이다.
   • 현재 상태가 HP 4칸, MP 4칸이라면 한 시간이 지날 수록 MP부터 한 칸씩 줄어들게 만들 것이다.

   // 기능설계  
     // MP부터 닳고 HP닳기  
     // 총 10칸을 9시부터 1시간 간격으로 닳게 하기  
     // 점심과 저녁시간 빼기  
     // removeClass, addClass 활용  
     
     // 0시가 되면 초기화  
     if (hours==0 || hours <= 9) {  
           $('.hp_bar').removeClass('hp_0').addClass('hp_4')  
           $('.mp_bar').removeClass('mp_0').addClass('mp_4')  
       }  
       // MP부터 10시부터~15시까지  
     
     else if (hours >= 10 && hours < 11) {  
           $('.mp_bar').removeClass('mp_4').addClass('mp_3')  
       } else if (hours >= 11 && hours < 12) {  
           $('.mp_bar').removeClass('mp_3').addClass('mp_2')  
       } else if (hours >= 12 && hours < 14) {  
           $('.mp_bar').removeClass('mp_2').addClass('mp_1')  
       } else if (hours >= 14 && hours < 15) {  
           $('.mp_bar').removeClass('mp_1').addClass('mp_0')  
       }  
     
       // HP 15시부터~21시까지  
     else if (hours >= 15 && hours < 16) {  
           $('.hp_bar').removeClass('hp_4').addClass('hp_3')  
           $('.mp_bar').removeClass('mp_4').addClass('mp_0')  
       } else if (hours >= 16 && hours < 17) {  
           $('.hp_bar').removeClass('hp_3').addClass('hp_2')  
           $('.mp_bar').removeClass('mp_4').addClass('mp_0')  
       } else if (hours >= 17 && hours < 19) {  
           $('.hp_bar').removeClass('hp_2').addClass('hp_1')  
           $('.mp_bar').removeClass('mp_4').addClass('mp_0')  
       } else if (hours >= 19 && hours < 20) {  
           $('.hp_bar').removeClass('hp_1').addClass('hp_0')  
           $('.mp_bar').removeClass('mp_4').addClass('mp_0')  
     
       } else {  
           $('.hp_bar').removeClass('hp_1').addClass('hp_0')  
           $('.mp_bar').removeClass('mp_1').addClass('mp_0')  
       }

   완성된 모습

   

   • 오전 10시가 되어 MP가 한 칸이 닳아 있는 형태