Javascript를 사용하는 나이 계산기 ( 소스 코드 )

2022-10-19 last update

8 minutes reading programming webdev javascript html

CodeWithRandom 블로그에 오신 것을 환영합니다. 이 기사에서는 날짜를 오늘 날짜로 계산하는 연령 계산기 프로젝트를 만듭니다. 연령 계산기의 경우 Html, Css 및 Javascript를 사용합니다.

블로그를 즐기시기 바라며 나이 계산기 자바스크립트의 기본 HTML 구조부터 시작하겠습니다.

연령 계산기용 HTML 코드

HTML 문서의 body 태그에서 element를 사용하여 계산기를 위한 컨테이너를 만들고 class 속성인 class = "container"를 추가합니다.

<body>
    <div class="container">
        <form>
            <div class="base">
                <div class="enter"><h4>Age Calculator</h4></div>
                <div class="block">
                    <p class="title">Date</p>
                    <input
                        type="text"
                        name="date"
                        id="date"
                        placeholder="dd"
                        required="required"
                        minlength="1"
                        maxlength="2"
                    />
                </div>
                <div class="block">
                    <p class="title">Month</p>
                    <input
                        type="text"
                        name="month"
                        id="month"
                        placeholder="mm"
                        required="required"
                        minlength="1"
                        maxlength="2"
                    />
                </div>
                <div class="block">
                    <p class="title">Year</p>
                    <input
                        type="text"
                        name="year"
                        id="year"
                        placeholder="yyyy"
                        required="required"
                        minlength="4"
                        maxlength="4"
                    />
                </div>
            </div>
            <div class="base">
                <div class="enter">
                    <input
                        type="button"
                        name="submit"
                        value="Submit"
                        onclick="age()"
                    />
                </div>
            </div>
            <div id="age"></div>
        </form>
    </div>
</body>

연령 계산기 프로젝트에 대한 모든 HTML 코드가 있습니다. 이제 CSS 및 JAVASCRIPT 없이 출력을 볼 수 있습니다. 그런 다음 연령 계산기용 CSS를 작성한 다음 연령 계산기용 자바스크립트 코드를 작성합니다.

나이 계산기에 대한 HTML 코드 출력

연령 계산기용 CSS 코드

body {
    font-family: Arial, Helvetica, sans-serif;
    background-color: #2782e3;
    font-size: 15px;
    line-height: 1.5;
    padding: 0;
    margin: 0;
}
* {
    box-sizing: border-box;
}
.container {
    width: 520px;
    height: auto;
    margin: 100px auto;
    background-color: #eee;
    border-radius: 25px;
}
.base {
    width: 100%;
    margin: 0;
    overflow: hidden;
    display: block;
    float: none;
}
.block {
    width: 135px;
    padding: 5px 20px;
    margin-left: 20px;
    display: inline-block;
    float: left;
}
.base h4 {
    font-size: 26px;
    text-align: center;
    font-family: sans-serif;
    font-weight: normal;
    margin-top: 0px;
    box-shadow: 0px 2px #bababa;
    background: white;
    font-size: 34px;
    color: navy;
}
.title {
    font-size: 20px;
    text-align: left;
    font-family: sans-serif;
    font-weight: normal;
    line-height: 0.5;
    letter-spacing: 0.5px;
    word-spacing: 2.7px;
    color: #1073d0;
}
input[type="text"] {
    width: 140px;
    margin: auto;
    outline: none;
    min-height: 50px;
    border: 2px solid #1073d0;
    padding: 12px;
    background-color: #f7f7f7;
    border-radius: 2px;
    color: #1073d0;
    font-size: 17px;
}
input[type="text"]:focus {
    background-color: #ffffff;
    border: 2px solid orange;
    outline: none;
}
input[type="button"] {
    width: 150px;
    margin-left: 35%;
    margin-top: 40px;
    outline: none;
    border: none;
    border-radius: 2px;
    background-color: #0761b6;
    color: #ffffff;
    padding: 14px 16px;
    text-align: center;
    font-size: 16px;
}
input[type="button"]:hover {
    background-color: #003669;
}
#age {
    display: block;
    margin: 10px;
    margin-top: 35px;
    padding: 10px;
    padding-bottom: 20px;
    overflow: hidden;
    font-family: verdana;
    font-size: 23px;
    font-weight: normal;
    line-height: 1.5;
    word-spacing: 2.7px;
    color: navy;
}

이제 연령 계산기에 대한 Html CSS 섹션 코딩을 완료했으므로 업데이트된 출력 CSS는 다음과 같습니다.

출력 나이 계산기

이제 연령 계산기에 자바스크립트를 추가합니다. 우리는 함수 age를 생성하고 자바스크립트에서 모든 html 요소를 가져오므로 사용자가 입력에 입력하는 것을 얻습니다. 그런 다음 오늘 날짜, 월, 연도를 가져오는 새 코드를 정의하여 사용자가 나이를 입력할 때 자바스크립트가 2개의 값을 계산하고 나이 계산기에 출력을 표시할 수 있도록 합니다.

*나이 계산기용 자바스크립트 코드 *

function age() {
    var d1 = document.getElementById("date").value;
    var m1 = document.getElementById("month").value;
    var y1 = document.getElementById("year").value;
    var date = new Date();
    var d2 = date.getDate();
    var m2 = 1 + date.getMonth();
    var y2 = date.getFullYear();
    var month = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
    if (d1 > d2) {
        d2 = d2 + month[m2 - 1];
        m2 = m2 - 1;
    }
    if (m1 > m2) {
        m2 = m2 + 12;
        y2 = y2 - 1;
    }
    var d = d2 - d1;
    var m = m2 - m1;
    var y = y2 - y1;
    document.getElementById("age").innerHTML =
        "Your Age is " + y + " Years " + m + " Months " + d + " Days";
}

최종 출력 자바스크립트 나이 계산기

이제 나이 계산기용 html, css 및 javascript 코드를 완료했으므로 다음은 javascript로 업데이트된 출력입니다.

결론

자바스크립트의 연령 계산기가 마음에 드셨으면 출력 비디오와 프로젝트 스크린샷을 볼 수 있습니다. 다른 블로그를 참조하고 프론트엔드 개발에 대한 지식을 얻으십시오. 고맙습니다

이 게시물에서는 간단한 HTML 및 CSS와 자바스크립트를 사용하여 연령 계산기 자바스크립트를 만드는 방법을 배웁니다. 우리가 실수하거나 혼란을 일으켰다면 댓글을 남겨 답장을 보내거나 쉬운 학습을 도와주세요.

작성자 – Random/Anki가 있는 코드

일부 관련 주제 -

dinogame-dino-game-using-html-css-javascript-chrome-dinogame

number-guessing-game-javascript-number-guess-game-javascript-game

chat-ui-design-using-html-and-css-chatbot-ui-template-html-free

notes-app-using-html-css-javascript-

category/project

HTML,CSS, JavaScript를 이용한 나만의 공룡 게임 (Chrome Dinosaur Game)

Sqlite3 및 Javascript로 데이터를 엄청나게 빠르게 제공