[Eric's JS] JavaScript로 나이계산, 띠 계산하는 함수 만들기 ⭐️

💻 개발공부/JavaScript

[Eric's JS] JavaScript로 나이계산, 띠 계산하는 함수 만들기 ⭐️

Eric_ko 2023. 7. 30. 21:30

안녕하세요,

여러분! 오늘은 JavaScript를 이용해 나이와 띠를 계산하는 간단한 함수를 만들어 보겠습니다.

이 함수는 사용자의 생년월일을 입력받아 그에 해당하는 나이와 띠를 계산하고, 이를 웹 페이지에 표시합니다.

먼저, HTML 구조를 살펴보겠습니다.

'age'와 'zodiac'라는 id를 가진 두 개의 div 요소가 있습니다. 이곳에 JavaScript를 통해 계산된 나이와 띠 정보가 표시됩니다.


  
    
    
    
    
  
<body>
  <div id="age"></div>
  <div id="zodiac"></div>
  ...
</body>

다음으로, JavaScript 코드를 살펴보겠습니다.

먼저, 사용자의 생년월일을 'birthDay' 변수에 저장합니다.


  
    
    
    
    
  
let birthDay = "2001-02-21";

만나이 계산하기

그리고 'calculateAge'라는 함수를 만듭니다.

이 함수는 생년월일을 입력받아 오늘 날짜와 비교하여 나이를 계산합니다.


  
    
    
    
    
  
function calculateAge (birthDateString) {
  var birthDate = new Date(birthDateString);
  var today = new Date();
  var age = today.getFullYear() - birthDate.getFullYear();
  var m = today.getMonth() - birthDate.getMonth();
  
  if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
          age--;
  }
  return age;
}
var age = calculateAge(birthDay);
document.getElementById('age').innerText = age +'살';

띠 구하기

다음으로, 'getKoreanZodiac'라는 함수를 만듭니다. 이 함수는 생년월일을 입력받아 그에 해당하는 띠를 계산합니다.


  
    
    
    
    
  
 function getKoreanZodiac (birthDateString) {
   let date = new Date(birthDay);
   let year = date.getFullYear();
   const zodiacs = ['쥐', '소', '호랑이', '토끼', '용', '뱀', '말', '양', '원숭이', '닭', '개', '돼지'];
   
   return zodiacs[(year - 4) % 12];
 }

 document.getElementById('zodiac').innerText = getKoreanZodiac(birthDay) + '띠';

이렇게 하면, 웹 페이지에 사용자의 나이와 띠가 표시됩니다.

코드


  
    
    
    
    
  
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="age"></div>
  <div id="zodiac"></div>

  <script>
    let birthDay = "2001-02-21";

    function calculateAge (birthDateString) {
      var birthDate = new Date(birthDateString);
      var today = new Date();
      var age = today.getFullYear() - birthDate.getFullYear();
      var m = today.getMonth() - birthDate.getMonth();
      if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
          age--;
      }
      return age;
    }
    var age = calculateAge(birthDay);
    document.getElementById('age').innerText = age +'살';

    function getKoreanZodiac (birthDateString) {
      let date = new Date(birthDay);
      let year = date.getFullYear();
      const zodiacs = ['쥐', '소', '호랑이', '토끼', '용', '뱀', '말', '양', '원숭이', '닭', '개', '돼지'];
      return zodiacs[(year - 4) % 12];
    }

    document.getElementById('zodiac').innerText = getKoreanZodiac(birthDay) + '띠';
  </script>
</body>
</html>

이 간단한 JavaScript 함수를 통해 나이와 띠를 쉽게 계산할 수 있습니다.

다음에는 더 복잡한 함수를 만들어 보겠습니다. 그럼 다음에 또 만나요!

저작자표시 비영리 변경금지

'💻 개발공부 > JavaScript' 카테고리의 다른 글

[Eric's JS] JavaScript에서 async/await과 forEach문 사용 문제 및 해결책 🤔 (0)	2024.07.29
[Eric's JS] JavaScript에서 동기와 비동기의 이해 ☕️ (0)	2023.10.15
[Eric's JS] localStorage 사용방법 🤔 (2)	2023.10.03
[Eric's JS] JavaScript 모든 for문 이해하기 🙃 Enumerable과 Iterable 활용 (feat. ES6) (2)	2023.05.11
[Eric's JS] 이벤트 루프(Event Loop) 란? 🔄 JavaScript, 브라우저 (0)	2023.05.07

현재글[Eric's JS] JavaScript로 나이계산, 띠 계산하는 함수 만들기 ⭐️

Just..Eric 개발. 리뷰, 맛집, 여행, 책, 공부. ◡̈

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

Just..Eric