728x90
티스토리 사이드바 만 나이코드 HTML
아래 코드를 텍스트 에디터에 붙여넣고 실행하면, 사용자가 생년월일을 입력하고 "만 나이 계산하기" 버튼을 클릭하면 만 나이를 계산하여 화면에 출력해 줍니다.
코드를 자세히 살펴보면, 먼저 calculateAge() 함수를 정의합니다. 이 함수는 사용자가 입력한 생년월일을 Date 객체로 변환하고, 현재 날짜도 Date 객체로 변환합니다. 그리고 getFullYear() 메서드를 사용하여 두 날짜의 연도 차이를 계산하고, getMonth() 메서드를 사용하여 두 날짜의 월 차이를 계산합니다.
만약 월 차이가 음수이거나, 월 차이가 0이고 일 차이가 생일보다 작으면, 만 나이를 1 감소시킵니다. 마지막으로, 계산된 만 나이를 innerHTML 속성을 사용하여 화면에 출력합니다.
이 코드를 실행하면 사용자가 입력한 생년월일에 따라 만 나이를 정확하게 계산해 줍니다.
<!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>
function calculateAge() {
let birthday = new Date(document.getElementById("birthday").value);
let today = new Date();
let age = today.getFullYear() - birthday.getFullYear();
let month = today.getMonth() - birthday.getMonth();
if (month < 0 || (month === 0 && today.getDate() < birthday.getDate())) {
age--;
}
document.getElementById("result").innerHTML = "당신의 만 나이는 " + age + "세 입니다.";
}
</script>
</body>
</html>
티스토리 관리자모드 - 꾸미기 - 사이드바 - 이미지 배너출력 - 만나이코드 삽입합니다.
아래와 같이 사이드바에 만나이 계산기가 생성됩니다.
728x90
SMALL
'블로그 > 팁' 카테고리의 다른 글
| 티스토리 사이드바 디지털시계 HTML (0) | 2024.02.01 |
|---|---|
| 티스토리 기본 스킨 소개 (0) | 2024.01.31 |
| 메타테그 확인하는 방법(구글, 빙, 네이버) (1) | 2024.01.29 |
| 스트리밍 사이트 우회 접속 방법 (0) | 2024.01.25 |
| 생성형 AI 사이트 뤼튼(wrtn) 소개 (0) | 2024.01.21 |