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

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;
    }
}

デモアドレス

http://haiyong.site/年齢計算機

上記は、HTML + JS に基づくシンプルな年齢計算機の詳細です。HTML JS 年齢計算機の詳細については、123WORDPRESS.COM の他の関連記事に注目してください。

以下もご興味があるかもしれません:
  • ネイティブ JavaScript を使用した Web 計算機の実装
  • JavaScriptで計算機機能を実現するプロセスの詳細な説明
  • JavaScriptはシンプルな計算機能を実装します
  • 計算機機能を実現するjsバージョン
  • シンプルな計算機を実装するためのネイティブ js
  • JavaScript で簡単な計算機を実装する
  • JavaScript を使用した Web 計算機の作成
  • JavaScript の例 - 計算機の実装

<<:  HTMLドロップダウンメニューを送信した後、デフォルト値に戻るのではなく、選択した値が保持されます。

>>:  Dockerfile 内の予約語命令の解析処理

推薦する

Kylin V10 サーバーで Storm をコンパイルしてインストールする詳細なプロセス

1 はじめにApache Storm は、Hadoop と同様に、大量のデータを処理するために使用で...

MySQL よく使われる関数の詳細な概要

目次MySQL 共通関数1. 数値関数文字列関数3. 時間機能4. システム機能5. 集計関数MyS...

ウェブデザインの詳細分析に関する詳細な議論

設計業務では、設計者がレビューに参加したり、リーダーの一部が設計案の詳細が足りないと言っているのをよ...

MySQL での外部キーの作成、制約、削除

序文MySQL バージョン 3.23.44 以降では、InnoDB エンジン タイプのテーブルは外部...

ページ リファクタリング スキル - Javascript、CSS

JS、CSSについてCS: ...上部のスタイルシートCSS式を避ける外部JS、CSSの使用JSと...

Reactでコンポーネントロジックを共有する3つの方法

簡単に説明すると、これら 3 つの方法は、レンダリング プロップ、高階コンポーネント、カスタム フッ...

MySql はデータを正常に挿入しますが、[Err] 1055 エラーが報告されます。解決策

1. 質問:最近、挿入操作を行っています。MySQLのバージョンは5.7です。挿入は成功しますが、エ...

URL 書き換えモジュール 2.1 URL 書き換えモジュールのルール記述

目次前提条件テストページの設定書き換えルールの作成命名規則モードの定義アクションの定義設定ファイル内...

MySQLの共通関数を使用してJSONを処理する方法

公式ドキュメント: JSON 関数名前説明JSON_APPEND() JSONドキュメントにデータを...

Vueプロジェクトが完了した後にプロジェクトを最適化する方法の例

目次1. 開発モードとリリースモードに異なるパッケージエントリポイントを指定する2. 外部CDNリソ...

HTML要素によるFlashブロックの詳細な例

コードをコピーコードは次のとおりです。 wmode パラメータ:透過モード: z-indexを使用し...

MySQL 8.0.22 のダウンロード、インストール、設定方法のグラフィックチュートリアル

参考までにMySQL 8.0.22をダウンロードしてインストールしてください。具体的な内容は次のとお...

MySQL最新バージョン8.0.17解凍版インストールチュートリアル

個人的にはインストール版よりも解凍版の方がインストールしやすいと思います。早速、解凍版のインストール...

MySQLはこのような更新文を決して書きません

目次序文原因現象なぜ?分析要約する序文今日は、非常に典型的な MySQL の「落とし穴」についてお話...

HTML テーブルタグチュートリアル (3): 幅と高さの属性 WIDTH、HEIGHT

デフォルトでは、テーブルの幅と高さはコンテンツに応じて自動的に調整されます。テーブルの幅と高さを手動...