moment 로 count down 만들기

현재 날짜 + 시간과 마감 날짜 + 시간 지정해서 카운트 다운되게 만들려고 한다.
형식은 00:00:00 로 시분초 로 노출한다.

현재 날짜와 시간 가져오는 것을 본인은 api를 만들어서 서버 시간을 가져와서 만든 케이스이다.
컴퓨터 시간을 가져오는 new Date() 나 moment 자체의 moment() 는 사용자의 시간을 가져와서 카운트 다운되기에 조작이 될 가능성이 많다.
그래서 서버 시간을 가져오는 api 만드는 것을 추천한다.  (방법은 서버 사이드 언어별로 상이하므로 직접 검색하시길...)

var getCurrentTime = moment(); //자체 제작 api를 못할 경우 기본 사용법 (사용자 컴퓨터상의 시간)
// var getCurrentTime = moment(result.data.date + ' ' + result.data.time); //자체 제작 api를 통해 서버에서 현재 시간 가져왔을 경우
var targetTime = moment('2020-01-17 23:59:59');
var getCurrentTimeUnix = getCurrentTime.unix();
var targetTimeUnix = targetTime.unix();
var leftTime = targetTimeUnix - getCurrentTimeUnix;
var duration = moment.duration(leftTime, 'seconds');
var interval = 1000;

var intv = setInterval(function(){
  if (duration.asSeconds() <= 1 || getCurrentTimeUnix >= targetTimeUnix ) {
    console.log('타이머 종료')
    clearInterval(intv);
  }else{
    duration = moment.duration(duration.asSeconds() - 1, 'seconds');
    var timer = {
      hours : (duration.hours() < 10) ? '0' + duration.hours() : duration.hours(),
      minutes : (duration.minutes() < 10) ? '0' + duration.minutes() : duration.minutes(),
      seconds : (duration.seconds() < 10) ? '0' + duration.seconds() : duration.seconds()
    }
    console.log(timer.hours + ' : ' + timer.minutes + ' : ' +  timer.seconds)
  }
}, interval);

 

 

Subscribe
Notify of
guest

이 사이트는 스팸을 줄이는 아키스밋을 사용합니다. 댓글이 어떻게 처리되는지 알아보십시오.

0 댓글
Inline Feedbacks
View all comments
TOP