본문 바로가기
Frontend/JavaScript

자바스크립트로 특정 날짜와 현재 날짜 비교하여 x시간전, x분전, x초전 구현하기

by 지구 2018. 7. 18.

특정 날짜와 현재 날짜를 비교해서 "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

반응형

댓글