今回はJavaScriptを駆使して、生年月日から現在の年齢を計算し、それをウェブページ上に表示する方法を詳しくご紹介します。この技術は、使いどころによってユーザーインターフェースを向上させることができます。
生年月日から年齢を算出するためのCSSとは?
まずは、年齢が表示される要素(.birthage)のスタイリングから。ここでは、読みやすさと視覚的魅力を両立させるためのCSSを紹介します。
<style> body { margin: 20px 10px; padding: 0; font-size: 18px; text-align: center; } h1{ text-align: center; font-size: 22px; line-height: 2em; padding-bottom: 20px; } .birthage{ text-align: center; font-size: 28px; font-weight: bold; color: red; padding: 15px 0; } </style>
このスタイルは、年齢を目立たせ、ウェブページのどの部分にも合わせやすいデザインになっています。
生年月日から年齢を計算するHTMLとJavaScript
次に、核心部分。生年月日から年齢を計算し、それをページに表示するJavaScriptのコードをご紹介します。このプログラムは、Dateオブジェクトを使って、今日の日付から対象の生年月日までの年数を計算します。
生年月日から年齢を返す関数getage(西暦,月,日付)を用意しました。getage()関数ではDate()を使って今年の誕生日を取得し、そこから年齢を計算してます。document.write()でgetage()からの返り値(年齢)を出力してます。
<h1>JavaScriptを使って生年月日から逆算して現在の年齢を表示</h1> <div align="center">1992年1月15日生まれの人は現在以下の年齢になります。</div> <script type="text/javascript"> function getage(y,m,d){ var today = new Date(); //今日の日付を取得 var thisYearsBirthday = new Date(today.getFullYear(), m-1, d); //今年の誕生日を取得 var age = today.getFullYear() - y; //年齢を取得 //今年まだ誕生日が来てない場合-1 if(today < thisYearsBirthday){ age--; } return age; } y=1992; m=1; d=15; document.write('<div class="birthage">'+getage(y,m,d)+'歳</div>'); </script>
このコードはシンプルながらも、年齢計算のロジックを明確に示しています。
JavaScriptを使って生年月日から逆算して現在の年齢を表示するデモページ
以下のリンクから実際のデモページを確認できます。色々な生年月日を入力して、その場で年齢が計算される様子を体験してみてください。
JavaScriptを使って生年月日から逆算して現在の年齢を表示するデモページ
まとめ
この記事では、JavaScriptを使って生年月日から年齢を計算し、ウェブページに表示する方法を紹介しました。エンジニアとしての経験を生かして、読者の皆さんがより理解しやすいように工夫しました。このテクニックを使えば、ウェブ開発の幅が広がること間違いなしです。ぜひお試しください!
※流用される場合は自己責任でお願いします。
デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。