HTML+JS に基づくシンプルな年齢計算ツールの実装

序文

オンラインデモアドレス: http://haiyong.site/age-calculator

JavaScript には、日付 (生年月日) から年齢を計算するのに役立つ組み込みの日付と時刻の関数がいくつか用意されています。これらの JavaScript メソッドを使用すると、誰の年齢も簡単に見つけることができます。これを行うには、ユーザー入力の日付と現在のシステム日付が必要です。

デモンストレーション効果

HTMLコード

<div class="コンテナ">
        <div class="inputs-wrapper">
            <input type="date" id="date-input">
            <button onclick="ageCalculate()">計算</button>
        </div>
        <div class="出力ラッパー">
            <div>
                <span id="年">
                    -
                </span>
                <p>
                    年
                </p>
            </div>
            <div>
                <span id="月">
                    -
                </span>
                <p>
                    月
                </p>
            </div>
            <div>
                <span id="日">
                    -
                </span>
                <p>
                    日数
                </p>
            </div>
        </div>
    </div>

CSSコード

*、
*：前に、
*：後{
    パディング: 0;
    マージン: 0;
    ボックスのサイズ: 境界線ボックス;
}
体{
    背景色: #ff6666;
}
。容器{
    幅: 40%;
    最小幅: 450px;
    位置: 絶対;
    変換: translate(-50%,-50%);
    左: 50%;
    上位: 50%;
    パディング: 50px 30px;
}
。容器 *{
    フォントファミリ: "Poppins"、サンセリフ;
    境界線: なし;
    アウトライン: なし;
}
.inputs-wrapper{
    背景色: #080808;
    パディング: 30px 25px;
    境界線の半径: 8px;
    ボックスの影: 0 15px 20px rgba(0,0,0,0.3);
    下部マージン: 50px;
}
入力、
ボタン{
    高さ: 50px;
    背景色: #ffffff;
    色: #080808;
    フォントの太さ: 500;
    境界線の半径: 5px;
}
入力{
    幅: 60%;
    パディング: 0 20px;
    フォントサイズ: 14px;
}
ボタン{
    幅: 30%;
    フロート: 右;
}
.出力ラッパー{
    幅: 100%;
    ディスプレイ: フレックス;
    コンテンツの両端揃え: スペースの間;
}
.出力ラッパーdiv{
    高さ: 100px;
    幅: 100ピクセル;
    背景色: #080808;
    境界線の半径: 5px;
    色: #ffffff;
    表示: グリッド;
    アイテムを配置: 中央;
    パディング: 20px 0;
    ボックスの影: 0 15px 20px rgba(0,0,0,0.3);

}
スパン{
    フォントサイズ: 30px;
    フォントの太さ: 500;
}
p{
    フォントサイズ: 14px;
    色: #707070;
    フォントの太さ: 400;
}

Javascriptコード

定数ヶ月 = [31,28,31,30,31,30,31,31,31,30,31,30,31];

関数 ageCalculate(){
    今日を新しいDate()とします。
    inputDate を新しい Date(document.getElementById("date-input").value) とします。
    生年月日、生年月日、生年月日を入力します。
    誕生の詳細を = {
        日付:inputDate.getDate(),
        月:inputDate.getMonth()+1,
        年:inputDate.getFullYear()
    }
    現在の年をtoday.getFullYear()とします。
    現在の月をtoday.getMonth()+1とします。
    currentDate を today.getDate() とします。

    leapChecker(現在の年);

    もし（
        birthDetails.year > 現在の年 ||
        ( birthDetails.month > currentMonth && birthDetails.year == currentYear) || 
        (birthDetails.date > currentDate && birthDetails.month == currentMonth && birthDetails.year == currentYear)
    ){
        alert("まだ生まれていません");
        表示結果("-","-","-");
        戻る;
    }

    birthYear = currentYear - birthDetails.year;

    現在の月 >= birthDetails.month の場合 {
        誕生月 = 現在の月 - birthDetails.month;
    }
    それ以外{
        生年月日--;
        誕生月 = 12 + 現在の月 - birthDetails.month;
    }

    現在の日付 >= birthDetails.date の場合 {
        birthDate = currentDate - birthDetails.date;
    }
    それ以外{
        生年月日--;
        days = months[currentMonth - 2]とします。
        birthDate = 日数 + currentDate - birthDetails.date;
        生年月日が0未満の場合
            誕生月 = 11;
            生年月日--;
        }
    }
    displayResult(生年月日、生年月日、生年月日);
}

関数 displayResult(bDate,bMonth,bYear){
    document.getElementById("years").textContent = bYear;
    document.getElementById("months").textContent = bMonth;
    document.getElementById("days").textContent = bDate;
}

関数leapChecker(年){
    if(年 % 4 == 0 || (年 % 100 == 0 && 年 % 400 == 0)){
        月[1] = 29;
    }
    それ以外{
        月[1] = 28;
    }
}