2年前ぐらいに作ったものですがこんなのがあったので貼っておこうかと思います。
よくブログで芸能人や著名人の生年月日と年齢を書いてある記事がありますが、そのまま書くと年齢は投稿した時のままですが、今はいくつなんだろう？って時があります。
そんな時に、htmlでクラスを一つ付け加えるだけで年齢を自動計算させるスクリプトです。jQueryで作ってあります。
See the Pen 生年月日から自動で年齢を計算する by Hidekichi (@Hidekichi) on CodePen.
使い方
htmlのタブを開いてもらえば実例が書いてありますが、任意の要素にサンプルのjQueryでいうとtestと言うクラスをつけて囲みます。
大体の場合、文章中に入れることになるかと思うので、spanとかを使うことになるでしょうか。作例ではdivで囲んであります。
<span class='test'>1995年9月17日</span>こういった感じです。
そうしますと、jQuery側では、.testと言うクラスがついてる要素の後ろに、
<span class='age' title='xx'>このようなhtmlを挿入しここに現在の年齢を追加します。閉じタグもありますが面倒だったので開始タグだけ書いてあります。
そうすると表示としては、
1995年9月17日(26歳)
というような感じになるというわけです。これは文章として打ち込んでいるので来年になっても26歳のままですが、サンプルのように自動で年齢起算が行われます。
初回はhtmlを打ち込んだりとひと手間かかりますがあとは自動です。記事投稿時の年齢のままで良い場合はhtmlで囲まず、自動的に年齢を進めたいところのみを囲めばよいという感じです。
実装方法としては、htmlのhead部分にjQuery本体を読み込んでおき、bodyの閉じタグ前ぐらいに、
<script> 〜 </script>
とscriptタグを入れて、この「〜」の部分にcodepenのjQueryをコピーします。jQuery冒頭にtestというクラス指定がしてありますがこれを任意のものに変えて下さい。
このtestというクラスに対して動作します。またageと言うクラスは年齢を追加する部分で使用していますのでそれ以外のクラスで動作させるクラス名を付けてください。
cssについては分かるようにご自身が利用されているスタイルシートの最後辺りにでも追加してわかる方は色であったり装飾を変更してもらえればと。
年齢の（）の部分はcssで表示しています。jQueryを改造するよりはcssの方を触ったほうが簡単だろうということでそうしてます。
言うてもこれを使うような場面ってあんまりないですけどね。
毎年同じ日にカウントアップするような物があったら何かしらで使えるかもしれません。見た目的には日時をcssで非表示にしてカウントアップだけで何かしらに使うとかもやり方によっては可能かと。
それ用に新しく書いたほうが良いですけどね。一番わかりやすいというか本来の目的としては、著名人らの生年月日をブログなどに掲載する際に自動で年齢を算出するというものです。
スクリプト自体にあまり柔軟性がないので生年月日は西暦4桁、日時も正しく書いておかないといけないのも注意です。