만 나이 계산기 스크립트

만 나이를 계산하는 스크립트 코드입니다.

만 나이 계산기

<!DOCTYPE html>
<html>

<head>
    <style>
        .btnCalculateBeomSang {
            background-color: #4CAF50;
            border: none;
            color: white;
            padding: 10px 20px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 10px;
            cursor: pointer;
            border-radius: 4px;
        }

        .formBeomSang {
            margin: 20px;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 4px;
            display: inline-block;
        }

        .formBeomSang label {
            display: block;
            margin-bottom: 10px;
        }

        .formBeomSang input[type="text"] {
            padding: 5px;
            width: 200px;
        }
    </style>
    <script>
        function calculateAge(event) {
            event.preventDefault();

            var birth = document.getElementById("birthBeomSang").value;
            var year = parseInt(birth.substr(0, 4));
            var month = parseInt(birth.substr(4, 2));
            var day = parseInt(birth.substr(6, 2));

            var currentDate = new Date();
            var valBirth = validateBirth(birth, currentDate);
            if (valBirth != "Y") {
                document.getElementById("resultBeomSang").innerHTML = valBirth;
                return;
            }

            var currentYear = currentDate.getFullYear();
            var currentMonth = currentDate.getMonth() + 1;
            var currentDay = currentDate.getDate();

            var hasBirthdayPassed = (currentMonth > month) || (currentMonth === month && currentDay >= day);

            var age = currentYear - year;
            if (!hasBirthdayPassed) {
                age--;
            }

            document.getElementById("resultBeomSang").innerHTML = "당신의 나이는 " + age + "세 입니다." + " (" + (hasBirthdayPassed ? "생일이거나 생일이 지났어요." : "아직 생일이 지나지 않았어요.") + ")";
        }

        function validateBirth(birth, getDate) {
            var year = parseInt(birth.substr(0, 4));
            var month = parseInt(birth.substr(4, 2));
            var day = parseInt(birth.substr(6, 2));
            var getYear = getDate.getFullYear();
            var getMonth = getDate.getMonth() + 1;
            var getDay = getDate.getDate();

            if (birth.length == 8) {
                if (month < 1 || month > 12) {
                    return "생월을 확인해 주세요. 1~12월 사이여야 합니다. " + month;
                } else if (day < 1 || day > 31) {
                    return "생일을 확인해 주세요. 1~31일 사이여야 합니다. " + day;
                } else if ((month == 4 || month == 6 || month == 9 || month == 11) && day == 31) {
                    return "생월을 확인해 주세요. 해당 월은 31일이 없습니다.";
                } else if (month == 2) {
                    if (day > 29) {
                        return "생일을 확인해 주세요. 2월 29일을 초과하였습니다.";
                    } else if (day == 29) {
                        var isLeapYear = (year % 4 == 0 && year % 100 != 0) || year % 400 == 0;
                        if (isLeapYear) {
                            return "Y";
                        } else {
                            return "생일을 확인해 주세요. 해당 연도는 2월 29일이 없습니다.";
                        }
                    } else {
                        return "Y";
                    }
                } else {
                    return "Y";
                }
            } else {
                return "생년월일 8자리를 입력해 주세요.";
            }
        }
    </script>
</head>

<body>
    <form class="formBeomSang" onsubmit="calculateAge(event)">
        <label for="birthBeomSang">생년월일:</label>
        <input type="text" id="birthBeomSang" placeholder="예) 20230101" maxlength="8" required><br>
        <button class="btnCalculateBeomSang">만 나이 계산하기</button>
        <p id="resultBeomSang"></p>
    </form>
</body>

</html>

다음은 블로그에 게시한 다른 버전의 만 나이 계산입니다. 스크립트는 아마 흡사할 겁니다.

<label>생년월일:</label>
<input type="text" id="birthBeomSang" placeholder="예) 20230101" maxlength="8" required="">
<button class="btnCalculateBeomSang" onclick="calculateAge()">만 나이 계산하기</button>
<p id="resultBeomSang">생년월일 8자리를 입력해 주세요.</p>
<style>
        .btnCalculateBeomSang {
            background-color: #4CAF50;
            border: none;
            color: white;
            padding: 10px 20px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 10px;
            cursor: pointer;
            border-radius: 4px;
        }
    </style>
<script>
        function calculateAge() {
            var birth = document.getElementById("birthBeomSang").value;
            var year = parseInt(birth.substr(0, 4));
            var month = parseInt(birth.substr(4, 2));
            var day = parseInt(birth.substr(6, 2));

            var currentDate = new Date();
            var valBirth = validateBirth(birth, currentDate);
            if (valBirth != "Y") {
                document.getElementById("resultBeomSang").innerHTML = valBirth;
                return;
            }

            var currentYear = currentDate.getFullYear();
            var currentMonth = currentDate.getMonth() + 1;
            var currentDay = currentDate.getDate();

            var hasBirthdayPassed = (currentMonth > month) || (currentMonth === month && currentDay >= day);

            var age = currentYear - year;
            if (!hasBirthdayPassed) {
                age--;
            }

            document.getElementById("resultBeomSang").innerHTML = "당신의 나이는 " + age + "세 입니다." + " (" + (hasBirthdayPassed ? "생일이거나 생일이 지났어요." : "아직 생일이 지나지 않았어요.") + ")";
        }

        function validateBirth(birth, getDate) {
            var year = parseInt(birth.substr(0, 4));
            var month = parseInt(birth.substr(4, 2));
            var day = parseInt(birth.substr(6, 2));
            var getYear = getDate.getFullYear();
            var getMonth = getDate.getMonth() + 1;
            var getDay = getDate.getDate();

            if (birth.length == 8) {
                if (month < 1 || month > 12) {
                    return "생월을 확인해 주세요. 1~12월 사이여야 합니다. " + month;
                } else if (day < 1 || day > 31) {
                    return "생일을 확인해 주세요. 1~31일 사이여야 합니다. " + day;
                } else if ((month == 4 || month == 6 || month == 9 || month == 11) && day == 31) {
                    return "생월을 확인해 주세요. 해당 월은 31일이 없습니다.";
                } else if (month == 2) {
                    if (day > 29) {
                        return "생일을 확인해 주세요. 2월 29일을 초과하였습니다.";
                    } else if (day == 29) {
                        var isLeapYear = (year % 4 == 0 && year % 100 != 0) || year % 400 == 0;
                        if (isLeapYear) {
                            return "Y";
                        } else {
                            return "생일을 확인해 주세요. 해당 연도는 2월 29일이 없습니다.";
                        }
                    } else {
                        return "Y";
                    }
                } else {
                    return "Y";
                }
            }
            else {
                return "생년월일 8자리를 입력해 주세요.";
            }
        }
    </script>

댓글