【jQuery】年齢・学年自動更新

8903 ワード
学年 JavaScript 年齢 jQuery JavaScript テキストリンク

はじめに

ポートフォリオ製作中に、年齢と学年を毎年変更したくないよー、と思い、盟友JavaScript君と一緒に自動更新してくれる機能を作ってみました！
ただし、大学生のみに対応しております。いずれ小中高にも対応できたらと、思ってはいます。対応コード書いてくだされば、すぐにでも反映いたします。

コード

jQuery
  /**
   * 年齢・学年自動計算
   *
   * YYYY/mm/ddの形式で指定
   * data-birth -> 誕生日
   * data-graduate -> 卒業日（学年の切り替わるYYYY/03/31を想定）
   * 
   * https://qiita.com/yuuumbk/items/5e750e18ab6370cef9fc
   */

  var today = new Date();

  $('.birth').each(function () {
    //年齢
    var birth = $(this).data('birth');
    var birthDate = new Date(birth);

    var age = today.getFullYear() - birthDate.getFullYear();
    var month = today.getMonth() - birthDate.getMonth();

    if (month < 0 || (month === 0 && today.getDate() < birthDate.getDate())) {
      age--;
    }

    age = Math.max(age, 0);
    var value = age + '歳';

    //学年
    var graduate = $(this).data('graduate');
    var graduateDate = new Date(graduate);

    if ((graduate.getFullYear() - today.getFullYear()) >= 0){
      var grade = 4 - (graduate.getFullYear() - today.getFullYear());
      var month = (graduate.getMonth()) - (today.getMonth());

      if (month < 0 || (month === 0 && graduate.getDate() < birthDate.getDate())) {
        grade++;
      }

      if (grade < 5) {
        value += ' - 大学' + grade + '年生';
      }
    }

    $(this).append(value);
  });

大学5年生になると自動的に大学生の表示は消えるようになっています。
また、valueの部分は自由に変えてくださって結構です。

使用例はこんな感じです。

index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <span class="birth" data-birth="2003/03/27" data-graduate="2025/03/31"></span>
</body>
</html>

おわりに

社会人になってもいつまでも大学生のまま、なんてことになりませんように！

参考