[기능클론] javascript 오늘 날짜, 요일 가져오기

[카카오 페이지]

 

카카오 홈페이지에 가면 오늘 날짜에 따라 타이틀이 바뀌는 것을 볼 수 있습니다

오늘 날짜 (월, 일, 요일)을 감지해서 기능을 넣은 것 같아요

 

---

1) 오늘 날짜 얻기

- 매개변수 없이 Date 함수를 new 연산자를 이용하여 호출하면 현재 날짜, 시간이 담긴 object 형태로 today 변수에 담긴다

- getFullYear() : 연도를 얻을 수 있음

- getMonth() : 월을 얻을 수 있음 (month는 0부터 세기 때문에 1월이면 0으로 나옴)

- getDate() : 일을 얻을 수 있음

- getDay() : 요일을 얻을 수 있음 (day는 0(일요일) ~ 6(토요일) 으로 나옴)

- 그 외에 getHours(), getMinutes(), getSeconds() 등이 있고, get 대신 set을 사용하면 값을 지정하여 변경할 수 있음

var today = new Date();
var month = today.getMonth();
var date = today.getDate();
var day = today.getDay();

2) 활용해보기

1. 오늘 날짜에 따라 타이틀 바꾸기
- 1.1 javascript로 오늘 날짜 구하기
- 1.2 숫자로 나타나는 요일을 한글로 바꿔주기
- 1.3 javascript로 div 내용 바꾸기

2. 오늘 날짜에 따라 background-image 바꾸기
- 2.1 짤 수집
- 2.2 css에서 background-image를 제외한 필요한 모든 속성 주기
- 2.3 오늘 일자에 따라 클래스 추가
- 2.4 css 생성

 

---

1. 오늘 날짜에 따라 타이틀 바꾸기

1.1 javascript로 오늘 날짜 구하기

- month는 0부터 세기 때문에 1월이면 0으로 나옴

- day는 0(일요일) ~ 6(토요일) 으로 나옴

- month, date, day 변수 선언 후 콘솔에 출력해보기

$(document).ready(function () {
    var today = new Date();
    var month = today.getMonth();
    var date = today.getDate();
    var day = today.getDay();
    console.log(month, date, day);
}

- 오늘 1월 6일 목요일 기준 month는 0, date는 6, day는 4가 나옴

콘솔 결과

 

1.2 숫자로 나타나는 요일을 한글로 바꿔주기

  if (day == 0) {
    day = "일요일";
  } else if (day == 1) {
    day = "월요일";
  } else if (day == 2) {
    day = "화요일";
  } else if (day == 3) {
    day = "수요일";
  } else if (day == 4) {
    day = "목요일";
  } else if (day == 5) {
    day = "금요일";
  } else if (day == 6) {
    day = "토요일";
  }

 

1.3 javascript로 div 내용 바꾸기

- div의 innerText를 변수를 이용하여 바꿔주기

  document.getElementById("tit_txt").innerText = 
  	`${month + 1}월 ${date}일 ${day} 소식입니다`;

[클론 페이지] 문구는 잘 출력됩니다

 

---

2. 오늘 날짜에 따라 background-image 바꾸기

2.1 짤 수집

- git에 있나 했는데 못찾겠어서 노가다

- 홈페이지의 링크를 찾고, 숫자만 1~31로 바꿔 검색하여 수집함

 

2.2 css에서 background-image를 제외한 필요한 모든 속성 주기

  #tit_date {
/* ... */
    background-repeat: no-repeat;
    background-position: 0 94px;
    background-size: 72px 72px;
  }

 

2.3 오늘 일자에 따라 클래스 추가

- background-image를 넣고 싶은 요소를 선택하여 클래스를 부여

- for문 이용해서 날마다 날짜에 맞는 클래스를 부여

  for (var i = 1; i <= 31; i++) {
    if (date == i) {
      document.getElementById("tit_date").classList = `tit_date${i}`;	// 큰 달력
      document.getElementById("wrap_tit_date").classList = `tit_date${i}`;	// 작은 달력
    }
  }

 

[클론 페이지] 오늘은 6일

 

2.4 css 생성

- 클래스명에 따라 background-image의 경로 설정

.tit_date1 {
  background-image: url("../imgs/light/date1.gif");
}
.tit_date2 {
  background-image: url("../imgs/light/date2.gif");
}

/* ... */

.tit_date30 {
  background-image: url("../imgs/light/date30.gif");
}
.tit_date31 {
  background-image: url("../imgs/light/date31.gif");
}

[클론 페이지] 잘 되네여