[게시판] JQuery로 타이머 만들기 -

DB에 저장된 값 : auction 등록 시간! (LocalDateTime)

 

Auction은 한시간만 진행하고 끝나야 함 

- 남은 시간을 타이머로 보여줄 예정 (제이쿼리로 타이머 만들기)

- 입력 될 때 @Scheduler 을 통해 한시간 후에 state를 0에서 1로 바뀌게 함 

==> 클래스를 더 만들어야 해서 수정! list를 불러올 때 state를 바꿔주는 모듈을 하나 더 만들 예정 

 

1. serviceImple - 타이머 함수 

    @Override
    public long timer(Optional<AuctionList> auction) {

        LocalDateTime time = auction.get().getRegDate(); // 등록시간 불러오기
        Date dTime = java.sql.Timestamp.valueOf(time); // 계산하기 위해 형 변형

        SimpleDateFormat sdf = new SimpleDateFormat("hh:mm:ss");
        Calendar cal = Calendar.getInstance();
        Date now = cal.getTime(); // 지금 시간
        cal.setTime(dTime);
        cal.add(Calendar.HOUR, 1); // 등록시간 +1 : 경매 완료 시간
        Date endTime = cal.getTime();
        long sec = (endTime.getTime()-now.getTime())/1000; // 경매완료시간 - 지금시간 (초)
        return sec;
    }

지금 시간을 받아와서 등록시간을 통해 마감시간을 알아내고 마감시간까지 남은 초 계산

시간 덧뺄셈이 가능하도록 형 변환 

 

2. jQuery - 받아온 남은 시간 타이머로 출력하기

<!-- 타이머 만들기 -->
<div id="timerDemo"></div>
<input th:type="button" th:value="${sec}">
[[${sec}]]

<script th:inline="javascript">
 var time = [[${sec}]];
 var min = "";
 var sec = "";

 var x = setInterval(function (){
    min = parseInt(time/60);
    sec = time%60;
    document.getElementById("timerDemo").innerHTML = min+"분 "+sec+"초";
    time --;

    if(time<0){
        clearInterval(x);
        document.getElementById("timerDemo").innerHTML = "경매 완료";
    }

 }, 1000);
</script>

interval을 이용해 1초마다 계산값을 갱신함 

 

3. 입력 한시간 후에 state 상태 변화 시키기