序文オンラインデモアドレス: 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ドロップダウンメニューを送信した後、デフォルト値に戻るのではなく、選択した値が保持されます。
1 はじめにApache Storm は、Hadoop と同様に、大量のデータを処理するために使用で...
目次MySQL 共通関数1. 数値関数文字列関数3. 時間機能4. システム機能5. 集計関数MyS...
設計業務では、設計者がレビューに参加したり、リーダーの一部が設計案の詳細が足りないと言っているのをよ...
序文MySQL バージョン 3.23.44 以降では、InnoDB エンジン タイプのテーブルは外部...
JS、CSSについてCS: ...上部のスタイルシートCSS式を避ける外部JS、CSSの使用JSと...
簡単に説明すると、これら 3 つの方法は、レンダリング プロップ、高階コンポーネント、カスタム フッ...
1. 質問:最近、挿入操作を行っています。MySQLのバージョンは5.7です。挿入は成功しますが、エ...
目次前提条件テストページの設定書き換えルールの作成命名規則モードの定義アクションの定義設定ファイル内...
公式ドキュメント: JSON 関数名前説明JSON_APPEND() JSONドキュメントにデータを...
目次1. 開発モードとリリースモードに異なるパッケージエントリポイントを指定する2. 外部CDNリソ...
コードをコピーコードは次のとおりです。 wmode パラメータ:透過モード: z-indexを使用し...
参考までにMySQL 8.0.22をダウンロードしてインストールしてください。具体的な内容は次のとお...
個人的にはインストール版よりも解凍版の方がインストールしやすいと思います。早速、解凍版のインストール...
目次序文原因現象なぜ?分析要約する序文今日は、非常に典型的な MySQL の「落とし穴」についてお話...
デフォルトでは、テーブルの幅と高さはコンテンツに応じて自動的に調整されます。テーブルの幅と高さを手動...