[JQuery / Javascript] 자바스크립트와 제이쿼리를 이용하여 나이를 구하는 방법

자바스크립트와 Jquery를 이용하여 나이를 구하는 식을 알아보겠습니다.

이 식이 필요 했던건 웹에 프로파일 정리하면서 나이를 역동적으로 보여 줄수 없을까? 하는 고민에서 생각하게된 방법입니다.

즉 해가 바뀌면 나이가 그 해에 맞추어 변하는 것이죠.

많은 시행착오 끝에 아래와 같이 스크립트를 마무리 하였습니다.

<script src='http://code.jquery.com/jquery-2.1.4.js' type='text/javascript'></script>
 
<script type='text/javascript'>
 
$(window).load(function(){

var dob = $('.age').data('age');

 

var xmlHttp;

function srvTime(){

if (window.XMLHttpRequest) {

xmlHttp = new XMLHttpRequest();

xmlHttp.open('HEAD',window.location.href.toString(),false);

xmlHttp.setRequestHeader("Content-Type", "text/html");

xmlHttp.send('');

return xmlHttp.getResponseHeader("Date");

}else if (window.ActiveXObject) {

xmlHttp = new ActiveXObject('Msxml2.XMLHTTP');

xmlHttp.open('HEAD',window.location.href.toString(),false);

xmlHttp.setRequestHeader("Content-Type", "text/html");

xmlHttp.send('');

return xmlHttp.getResponseHeader("Date");

}

}

var st = srvTime();

 

if(dob != ''){

var str=dob.split('-');

var today = new Date(st);

var toMonth = today.getMonth()+1;

var toDate = today.getDate();

var toYear = today.getFullYear();

var toAge = toYear - str[0];

 

if (toMonth > str[1]){

dayDiff = toAge;

} else if (str[1] > toMonth) {

dayDiff = toAge -1;

} else {

if (str[2] > toDate) {

dayDiff =toAge -1;

} else {

var dayDiff = toAge;

}

}

 

var age = parseInt(dayDiff);

$('.age').html('( ' + toYear + '년 현재 : ' + age + '세 )');

}

});
 
</script>
 
<age data-age="1975-8-31" class="age"></age>

JQuery를 불러옵니다.

<script src='http://code.jquery.com/jquery-2.1.4.js' type='text/javascript'></script>

웹 페이지가 완전히 로드 되면 function을 실행 결과를 뿌려 줍니다.

$(window).load(function()

Class="age"를 찾아 data-age="..." 값을 불러와 dob에 저장 합니다.

var dob = $('.age').data('age');

이전에 다루었던 서버시간을 가져오는 스크립트 입니다.

var xmlHttp;

function srvTime(){

if (window.XMLHttpRequest) {

xmlHttp = new XMLHttpRequest();

xmlHttp.open('HEAD',window.location.href.toString(),false);

xmlHttp.setRequestHeader("Content-Type", "text/html");

xmlHttp.send('');

return xmlHttp.getResponseHeader("Date");

}else if (window.ActiveXObject) {

xmlHttp = new ActiveXObject('Msxml2.XMLHTTP');

xmlHttp.open('HEAD',window.location.href.toString(),false);

xmlHttp.setRequestHeader("Content-Type", "text/html");

xmlHttp.send('');

return xmlHttp.getResponseHeader("Date");

}

}

var st = srvTime();

dob의 값을 "-"를 기준으로 나누어 str에 배열로 저장합니다.

var str=dob.split('-');

서버시간을 Date형식으로 today에 저장합니다.

var today = new Date(st);

서버시간중 달(월) 부분을 뽑아 냅니다.

getMonth()로 뽑은 결과는 0~11 까지 이므로 실제 달(월) 값은 1을 더해야 합니다.

var toMonth = today.getMonth()+1;

오늘 날짜(일)을 월기준으로 뽑아 냅니다.

getDay()는 주단위로 0~6 즉 그 주의 몇번째 날인가를 또는 요일을 의미 합니다.

getDate()는 1~31의 기준으로 월기준 날짜입니다.

var toDate = today.getDate();

해(년)를 4자리 수로 뽑아 옵니다.

var toYear = today.getFullYear();

나이를 계산합니다.

현재의 해(년)에서 입력받은 해(년)를 빼 줍니다.

var toAge = toYear - str[0];

만약 입력받은 달(월)이 현재 달(월)보다 작다면 현재년도에서 입렵받은 년도를 뺀 값 그대로 dayDiff에 저장합니다.

if (toMonth > str[1]){

dayDiff = toAge;

}

만약 입력 받은 달(월)이 현재 달(월)보다 크다면 생일이 지나지 않았으므로 1살을 빼서 dayDiff에 저장합니다.

else if (str[1] > toMonth) {

dayDiff = toAge -1;

}

만약 입력 받은 달(월)과 현재의 달(월)이 같다면 날짜를 비교합니다.

만약 입력 받은 날짜(일)이 현재의 날짜(일)보다 크다면 생일이 지나지 않았으므로 1살을 빼서 dayDiff에 저장합니다.

만일 입력 받은 날짜(일)과 현재의 날짜(일)이 작거나 같드면 생일이 지났으므로 현재의 년도에서 입력 받은 년도를 뺀 값을 dayDiff에 저장합니다.

 else {

if (str[2] > toDate) {

dayDiff =toAge -1;

} else {

var dayDiff = toAge;

}

}

HTML 형식으로 Class="age"에 기록 합니다.

결과는 "( 2015년 현재 : XX세 )"로 표시 됩니다.

$('.age').html('( ' + toYear + '년 현재 : ' + age + '세 )');

<age></age> 태그는 편의상 만든 태그입니다. DIV, SPAN, P 등의 태그를 사용하셔되 됩니다.

data-age="4자리년도-월-일" 형식으로 기록합니다.

일부 기호는 태그에 영향을 줄 수도 있기 때문에 기호 사용시 주의 하세요.

실제 이곳의 class명인 age를 찾아 data-age 값을 받아 위의 스크립트가 계산 후에 다시 class 명이 age인 이곳에 뿌려 주는 원리입니다.

<age data-age="1975-8-31" class="age"></age>

좀 복잡하고 장황하고 길지만 자세하게 설명하였으니 여러가지로 응용하여 사용 할 수도 있을 것입니다.