Frontend/JavaScript
자바스크립트로 특정 날짜와 현재 날짜 비교하여 x시간전, x분전, x초전 구현하기
지구
2018. 7. 18. 21:36
특정 날짜와 현재 날짜를 비교해서 "x시간 전, x분 전, x초 전, 방금 전" 과 같은 문구를 리턴해주는 javascript 구현.
실제 돌아가는 메커니즘은 구글링만 해도 금방 나오는데, 이해하고 내꺼화하며 적용하기가 쉽지 않았다.
그래도 구현하니 뿌듯함 ㅠㅠ !!!!!
* 구현방법 *
1. BODY 내부
1 2 | <!-- 마지막 댓글달린 시간 --> <div id="commLastTime" class="${board.commLastTime}"></div> | cs |
2. 돌아가도록 선언한 JAVASCRIPT
1 2 3 4 5 6 7 8 9 10 11 | //마지막으로 작성된 댓글시간 출력을 함수로 만들고 function refreshDate(){ $("#commLastTime").text(transferTime( $("#commLastTime").attr("class") ) ); } $(function(){ //마지막으로 작성된 댓글시간 출력을 함수 바로 실행 refreshDate(); //그리고 10초 뒤 또 실행하도록 설정 setInterval(function(){refreshDate()}, 10000); } | cs |
3. 가장 중요한 실제 날짜계산해주는 JAVASCRIPT
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 | //HJS //날짜계산 function transferTime(time){ var now = new Date(); var sYear = time.substring(0,4); var sMonth = time.substring(4,6)-1; var sDate = time.substring(6,8); var sHour = time.substring(8,10); var sMin = time.substring(10,12); var sSecond = time.substring(12,14); var sc = 1000; var today = new Date(sYear,sMonth,sDate,sHour,sMin,sSecond); //지나간 초 var pastSecond = parseInt((now-today)/sc,10); var date; var hour; var min; var str = ""; var restSecond = 0; if(pastSecond > 86400){ date = parseInt(pastSecond / 86400,10); restSecond = pastSecond % 86400; str = date + "일 "; if(restSecond > 3600){ hour = parseInt(restSecond / 3600,10); restSecond = restSecond % 3600; str = str + hour + "시간 "; if(restSecond > 60){ min = parseInt(restSecond / 60,10); restSecond = restSecond % 60; str = str + min + "분 " + restSecond + "초 전"; }else{ str = str + restSecond + "초 전"; } }else if(restSecond > 60){ min = parseInt(restSecond / 60,10); restSecond = restSecond % 60; str = str + min + "분 " + restSecond + "초 전"; }else{ str = str + restSecond + "초 전"; } }else if(pastSecond > 3600){ hour = parseInt(pastSecond / 3600,10); restSecond = pastSecond % 3600; str = str + hour + "시간 "; if(restSecond > 60){ min = parseInt(restSecond / 60,10); restSecond = restSecond % 60; str = str + min + "분 " + restSecond + "초 전"; }else{ str = str + restSecond + "초 전"; } }else if(pastSecond > 60){ min = parseInt(pastSecond / 60,10); restSecond = pastSecond % 60; str = str + min + "분 " + restSecond + "초 전"; }else{ str = pastSecond + "초 전"; } if(str=="0초 전"){ str = "방금 전"; } return str; } | cs |
ㅇ
반응형