【jQuery】연령・학년 자동 갱신
소개
포트폴리오 제작중에, 연령과 학년을 매년 변경하고 싶지 않아ー, 라고 생각해, 맹우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>
결론
사회인이 되어도 언제까지나 대학생인 채, 그렇게 되지 않게!
참고
Reference
이 문제에 관하여(【jQuery】연령・학년 자동 갱신), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/yuuumbk/items/5e750e18ab6370cef9fc텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
