年齢表示自働化 JS

1年前ぐらいに、現在の年を表記する、って JS を出していたかと。
コレの派生で、年齢表示もありがち。

カッコで、(取材当時)とか、(2023年現在)とか書いて、放置するページが多いのは、いつまで紙やと思ってるねん? って、Web 側から見たら、何をホザいてるのかと。。。

というわけで、対象者の、誕生日から自動的に、そのページが存在する限り年齢を更新してやろーでゎないか。

HTML 側

(<span id="nowAge">歳</span>)

JS 側

<script>
const birthdate = '1979/8/1';//誕生日設定
const ageCalc = (birthDate , nowDate) => {//最終的な計算用
    const age = nowDate.getFullYear() - birthDate.getFullYear();//現在YYYYから年だけ計算
    const thisYearsBD = new Date(nowDate.getFullYear() ,birthDate.getMonth() ,birthDate.getDate());//今年の誕生日確認
    return age + (thisYearsBD.getTime() > nowDate.getTime() ? -1 : 0);//誕生日以前だとマイナス1
}
const age = ageCalc(new Date(birthdate) ,new Date());//設定誕生日を代入して計算
document.getElementById('nowAge').innerText=(age + '歳');//○歳 と出力する
</script>

birthdate の日付を、YYYY/MM/DD で設定すれば、あとは、id=nowAge を、HTML 側と合わせれば、お好きな文字列に変更可能。

このままの記述だと、span 以下に JS を置けば、即時発火。
各種、読み込みタイミングを取るのであれば、適宜、共通 script に格納したり、単体 .js ファイル化して読み込む、などで処理しましょう。

また、変数は、短い方が見やすい、など好みがあれば、これも適宜変更のこと。birthdate → bd とか、ageCalc → aCal など。
なお、複数回出てくる変数は、全部ちゃんと変更すること。

この記事が気に入ったらサポートをしてみませんか?