![[HTML소스포함]JavaScript로_만나이_계산하기](https://blog.kakaocdn.net/dn/bOPY19/btsB5VAioh7/kU2OyKQETeX0SQl454FqKK/img.png)
만 나이 계산기
코드블럭 ->
<!DOCTYPE html>
<html>
<head>
<title>만 나이 계산기</title>
</head>
<body>
<h1>만 나이 계산기</h1>
<form>
<label for="birthday">생년월일:</label>
<input type="date" id="birthday" name="birthday"><br><br>
<input type="button" value="만 나이 계산" onclick="calculateAge()">
</form>
<p id="result"></p>
<script>
// 사용자가 입력한 생년월일을 Date 객체로 변환합니다.
function calculateAge() {
let birthday = new Date(document.getElementById("birthday").value);
// 현재 날짜를 Date 객체로 변환합니다.
let today = new Date();
// 두 날짜의 연도 차이를 계산합니다.
let age = today.getFullYear() - birthday.getFullYear();
// 두 날짜의 월 차이를 계산합니다.
let month = today.getMonth() - birthday.getMonth();
// 만약 월 차이가 음수이거나, 월 차이가 0이고 일 차이가 생일보다 작으면, 만 나이를 1 감소시킵니다.
if (month < 0 || (month === 0 && today.getDate() < birthday.getDate())) {
age--;
}
// innerHTML 속성을 사용하여 만 나이를 출력합니다.
document.getElementById("result").innerHTML = "당신의 만 나이는 " + age + "세 입니다.";
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>만 나이 계산기</title>
</head>
<body>
<h1>만 나이 계산기</h1>
<form>
<label for="birthday">생년월일:</label>
<input type="date" id="birthday" name="birthday"><br><br>
<input type="button" value="만 나이 계산" onclick="calculateAge()">
</form>
<p id="result"></p>
<script>
// 사용자가 입력한 생년월일을 Date 객체로 변환합니다.
function calculateAge() {
let birthday = new Date(document.getElementById("birthday").value);
// 현재 날짜를 Date 객체로 변환합니다.
let today = new Date();
// 두 날짜의 연도 차이를 계산합니다.
let age = today.getFullYear() - birthday.getFullYear();
// 두 날짜의 월 차이를 계산합니다.
let month = today.getMonth() - birthday.getMonth();
// 만약 월 차이가 음수이거나, 월 차이가 0이고 일 차이가 생일보다 작으면, 만 나이를 1 감소시킵니다.
if (month < 0 || (month === 0 && today.getDate() < birthday.getDate())) {
age--;
}
// innerHTML 속성을 사용하여 만 나이를 출력합니다.
document.getElementById("result").innerHTML = "당신의 만 나이는 " + age + "세 입니다.";
}
</script>
</body>
</html>
HTML블럭 ->
만 나이 계산기
<!DOCTYPE html>
<html>
<head>
<title>만 나이 계산기</title>
</head>
<body>
<h1>만 나이 계산기</h1>
<form>
<label for="birthday">생년월일:</label>
<input type="date" id="birthday" name="birthday"><br><br>
<input type="button" value="만 나이 계산" onclick="calculateAge()">
</form>
<p id="result"></p>
<script>
// 사용자가 입력한 생년월일을 Date 객체로 변환합니다.
function calculateAge() {
let birthday = new Date(document.getElementById("birthday").value);
// 현재 날짜를 Date 객체로 변환합니다.
let today = new Date();
// 두 날짜의 연도 차이를 계산합니다.
let age = today.getFullYear() - birthday.getFullYear();
// 두 날짜의 월 차이를 계산합니다.
let month = today.getMonth() - birthday.getMonth();
// 만약 월 차이가 음수이거나, 월 차이가 0이고 일 차이가 생일보다 작으면, 만 나이를 1 감소시킵니다.
if (month < 0 || (month === 0 && today.getDate() < birthday.getDate())) {
age--;
}
// innerHTML 속성을 사용하여 만 나이를 출력합니다.
document.getElementById("result").innerHTML = "당신의 만 나이는 " + age + "세 입니다.";
}
</script>
</body>
</html>
calculateAge() 함수는 사용자가 입력한 생년월일을 Date 객체로 변환하고,
현재 날짜도 Date 객체로 변환합니다.
getFullYear() 메서드를 사용하여 두 날짜의 연도 차이를 계산
getMonth() 메서드를 사용하여 두 날짜의 월 차이를 계산
만약 월 차이가 음수이거나,
월 차이가 0이고 일 차이가 생일보다 작으면,
만 나이를 1 감소시킵니다.
innerHTML 속성을 사용하여 만 나이를 출력합니다.
'Yami 정보!' 카테고리의 다른 글
| 다양한 풍미와 맛의 영어 표현, 맛표현, 한글 맛표현 (2) | 2024.01.03 |
|---|---|
| [HTML소스포함]JavaScript로 시계만들기 (2) | 2023.12.05 |
| (노코드 앱) 구글 앱시트(Appsheet) 화면 메뉴 (0) | 2023.09.12 |
| 손목닥터9988 포인트 사용 서울페이 서울사랑상품권 (0) | 2023.06.11 |
| 한전 <에너지 캐시백> 신청 방법 안내 !! (0) | 2023.06.09 |
댓글