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 内の予約語命令の解析処理

推薦する

CSS スキル コレクション - 古典の中の古典

リンク上の点線のボックスを削除しますコードをコピーコードは次のとおりです。 a:アクティブ、a:フォ...

初心者がHTMLタグを学ぶ(1)

初心者は、いくつかの HTML タグを理解することで HTML を学習できます。この入門書は、初心者...

VMware Workstation 14 Pro のインストールとアクティベーションのグラフィック チュートリアル

この記事では、VMware Workstation 14 Proのインストールとアクティベーションに...

Vueのインストールと使用

目次1. Vueのインストール方法1: CDNの導入方法2: 直接ダウンロードしてインポートする方法...

Linux でファイル内の特定の文字の数を数える方法

ファイル内の文字列の数を数えることは、実際には砂の中の石を探すようなものです。ある人は、石を見た後に...

Link と @import の違いを詳しく見る

ページで CSS を使用する主な方法は、スタイル属性値をインラインで追加する方法、ページ ヘッダーで...

Zen Coding 簡単で素早いHTMLの書き方

禅コーディングテキストエディタプラグインです。 Zen Coding を使用するテキスト エディター...

Linux ログ表示方法 6 つのまとめ

バックエンド プログラマーは、さまざまな場所で Linux を扱います。Linux ログの読み方がわ...

Linux の EXT シリーズファイルシステムフォーマットの詳細な説明

Linux ファイルシステム一般的なハードディスクは上図のとおりです。各ディスクは複数のトラックに分...

Baidu サイト検索が https をサポートしていない問題の解決策 (テスト済み)

最近、携帯電話で https が有効になりました。緑色のロックを取得するには、次の問題を解決する必要...

HTML テーブルの空白セル補完を実装する方法

私が初めて Web 開発を独学で学んだ頃は、いわゆる DIV/CSS レイアウトはなく、テーブル レ...

Centos6.5 で MySQL 5.7.19 をインストールして設定する方法

Centos6.5にmysql5.7.19をインストールするための詳細な手順は次のとおりです。 1....

バックエンド管理システムを構築するためのvue-element-adminの実装手順

最近、カンファレンスの健康申告システムに取り組んでいたとき、バックエンドを構築する必要があり、vue...

JavaScriptがDOMツリーの構築にどのように影響するかについて詳しく説明します。

目次ドキュメント オブジェクト モデル (DOM) DOM と JavaScript DOMツリーの...

IDEA が Docker を統合してリモート展開を実現するための手順

1. Dockerサーバーへのリモートアクセスを有効にするdocker が配置されているリモート サ...