본문 바로가기
JAVASCRIPT & JQUERY

[JavaScript] 실시간 타이머 구현 방법

by GoodDayDeveloper 2024. 1. 4.
반응형

 

 

웹 개발 도중에는 동적인 표현을 위해 실시간 기능을 구현해야할 경우가 생기게 됩니다.

따라서, 이를 해결하기 위해 자바스크립트를 이용한 실시간 타이머 기능을 정리해보겠습니다.

구현 방법은 설명보다는 아래 영상으로 준비해보았습니다.

 

 

 

실시간 타이머 구현 영상

 

 

 

 

 

60초 기준으로 시간이 지나면서 0초가 된다면 경과시간이 업데이트되는 로직입니다. 

이를 자바 스크립트로 구현하였으며 이에 대한 구현 방법을 시작해보겠습니다.

 

 

 

 

실시간 타이머 구현 HTML

 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<p class="mb5 f15 font-bold"><i class="fas fa-arrow-circle-right"></i> [갱신 시간 <strong class="font-orange" id="viewTimer">60초</strong> ]</p>
<table class="table_t1" cellspacing="0" summary="">
    <caption>리스트</caption>  
    <colgroup> 
        <col />
        <col />
    </colgroup>
    <thead> 
        <tr>
          <th>등록시간</th>
          <th>경과시간</th>
        </tr>
    </thead>
    <tbody id="groupKar">
        <tr>
            <td id="cretDate"><c:out value="2023-10-20 14:15"/></td>
            <td id="nowDate"></td>
        </tr>
        <tr>
            <td id="cretDate"><c:out value="2023-10-20 12:03"/></td>
            <td id="nowDate"></td>
        </tr>        
    </tbody>
</table> 
 cs

 

 

HTML에서는 평범하게 테이블 형태의 리스트에서 구현해보았습니다.

여기서 특이점은 갱신 시간을 나타내주는 부분에 강조를 위해 strong 태그로 감싸준 다음, 실시간 동적 기능을 위해 id인 viewTimer를 설정해주었습니다.

그리고 nowDate에 경과시간을 표현해주기 위해 tbody 부분이 groupKar를 id로 설정하였습니다.

 

 

 

 

 

실시간 타이머 구현 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
69
70
71
72
73
74
<script type="text/javascript">
 
var  tid;
var  st = 60;
 
$(function(){    
    window.onload = function TimerStart(){ 
        tid=setInterval('msg_time()',1000)
        timer();
    }
});
 
function msg_time() {        
    var m = st + "초 ";                        
    
    $("#viewTimer").text(m);                        
    st--;                        
    if (st < 0) timer();            
}
 
function timer(){    
    
    clearInterval(tid);        // 타이머 해제
    st =60;
    tid=setInterval('msg_time()',1000);    
    
    $.ajax({
        url : "/index_nowTimer.do",
        type : "POST",
        contentType : "application/json;charset=UTF-8",            
        dataType : "json"
    }).done(function(result) {
        var nowTime = result.nowTimer;
        var arrNowTime  = nowTime.split("-");
        arrNowTime[1] = arrNowTime[1] -1;
        var date1 = new Date(arrNowTime[0],arrNowTime[1],arrNowTime[2],arrNowTime[3],arrNowTime[4]);
        
        $("#groupKar tr").each(function(index) {
            var cretDate = $(this).find("#cretDate").text().trim();
            var cYear = cretDate.substring(0,4);
            var cMonth = cretDate.substring(5,7);
            cMonth = cMonth-1;
            var cDay = cretDate.substring(8,10);
            var cHours = cretDate.substring(11,13);
            var cMin = cretDate.substring(14,16);
            
            var date2 = new Date(cYear,cMonth,cDay,cHours,cMin);
            var ep = date1 - date2;
            if(ep>=86400000){
                var day = Math.floor(ep / 86400000);
            }
            var ho = Math.floor((ep % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            var mn = Math.floor((ep % (1000 * 60 * 60)) / (1000 * 60));
            
            var eday = 24 * 60 * 60 * 1000;
            
            if(parseInt(ep / eday) >=1 && ho >= 0){
                $(this).find("#cretDate").css("background-color","#fbbbc7");
                $(this).find("#nowDate").css("background-color","#fbbbc7");
            }
            if(day>=1){
                $(this).find("#nowDate").text(String(day).padStart(2,"0")+"일 " +String(ho).padStart(2,"0")+"시 " +String(mn).padStart(2,"0")+"분");
            }else{
                $(this).find("#nowDate").text(String(ho).padStart(2,"0")+"시 " +String(mn).padStart(2,"0")+"분");
            }
 
        });
 
    }).fail(function(e) {
    }).always(function() {
    });    
}
 
</script>
 cs

 

 

스크립트에서는 전역 변수 tid와 st를 생성해줍니다.

 

function을 통해서 페이지 시작시에 TimerStart 함수를 이용하고

setInterval를 이용해서 1초마다 msg_time함수를 실행시켜줍니다.

 

msg_time 함수에서는 st를 하나씩 빼주면서 갱신 시간 태그인 viewTimer에 숫자를 실시간으로 넣어줍니다.

 

0보다 작을경우 timer 함수가 실행되는데 여기서 경과시간이 반영되게 됩니다.

 

timer함수에서는 clearInterval를 이용하여 함수를 중단시킵니다.

 

다시 st와 tid에 값을 적용하고 ajax를 통해 시간을 가져옵니다.

 

 

 

 

 

실시간 타이머 구현 서버

 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@RequestMapping(value="/index_nowTimer.do")
@ResponseBody
public void  index_timer(    
        HttpSession session,        
        HttpServletRequest request,
        HttpServletResponse response 
        ) throws Exception {        
    
    JSONObject obj = new JSONObject();
    SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd-HH-mm");
    Date newDate = new Date();
    sdf.format(newDate);
    response.setContentType("text/html; charset=UTF-8");
    PrintWriter out = response.getWriter();                  
    obj.put("nowTimer", sdf.format(newDate));                  
    out.print(obj);
}
 cs

 

 

서버에서 현재시간을 가져오는 작업입니다.

 

스크립트로 넘어와서 본격적으로 HTML에 반영을 시작합니다.

 

SPLIT로 시간을 나누어 date1에 넣어줍니다.

 

tbody 아이디 값인 groupKar을 반복하면서 creatDate값을 가져온 다음 각각의 시간을 date2에 넣어줍니다.

 

그리고 date1에서 date2를 빼준다음 계산식을 경과시간에 적용하면 됩니다.

 

1일이 초과할 경우 빨강색 음영으로 표시해주는 것이 인상적입니다.

 

 

 

 

 

반응형
저작자표시

'JAVASCRIPT & JQUERY' 카테고리의 다른 글

[JavsScript] Performance 객체를 이용한 성능 측정 방법  (0) 2024.01.30
[JavaScript] CheckBox 전체 선택 및 해제 방법  (1) 2024.01.04
[Javascript&JQuery] 비밀번호 Caps Lock 설정 방법 (영상)  (1) 2023.01.01
[JavaScript/JQuery] 동적변수 사용 방법  (0) 2022.12.23
submit 후 HttpServletResponse 응답 받는법  (0) 2022.11.30

관련글

댓글

티스토리툴바