序文オンラインデモアドレス: 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 の他の関連記事に注目してください。 以下もご興味があるかもしれません:
|
<<: HTMLドロップダウンメニューを送信した後、デフォルト値に戻るのではなく、選択した値が保持されます。
リンク上の点線のボックスを削除しますコードをコピーコードは次のとおりです。 a:アクティブ、a:フォ...
初心者は、いくつかの HTML タグを理解することで HTML を学習できます。この入門書は、初心者...
この記事では、VMware Workstation 14 Proのインストールとアクティベーションに...
目次1. Vueのインストール方法1: CDNの導入方法2: 直接ダウンロードしてインポートする方法...
ファイル内の文字列の数を数えることは、実際には砂の中の石を探すようなものです。ある人は、石を見た後に...
ページで CSS を使用する主な方法は、スタイル属性値をインラインで追加する方法、ページ ヘッダーで...
禅コーディングテキストエディタプラグインです。 Zen Coding を使用するテキスト エディター...
バックエンド プログラマーは、さまざまな場所で Linux を扱います。Linux ログの読み方がわ...
Linux ファイルシステム一般的なハードディスクは上図のとおりです。各ディスクは複数のトラックに分...
最近、携帯電話で https が有効になりました。緑色のロックを取得するには、次の問題を解決する必要...
私が初めて Web 開発を独学で学んだ頃は、いわゆる DIV/CSS レイアウトはなく、テーブル レ...
Centos6.5にmysql5.7.19をインストールするための詳細な手順は次のとおりです。 1....
最近、カンファレンスの健康申告システムに取り組んでいたとき、バックエンドを構築する必要があり、vue...
目次ドキュメント オブジェクト モデル (DOM) DOM と JavaScript DOMツリーの...
1. Dockerサーバーへのリモートアクセスを有効にするdocker が配置されているリモート サ...