실제 카운트 다운 후 다른 카운트 다운을하십시오

Question

다음 카운트 다운에 도움이 필요합니다. 실제 카운트 다운이 끝나면 다른 날짜로 실제 카운트 다운을 재설정해야합니다. 이 모든 것을 하나의 간단한 카운터에 넣으십시오.

$(function(){ 
 

 
function countdown() { 
 

 
var now = new Date(); 
 
var eventDate = new Date('Nov 03, 2017 13:02:20'); 
 
var secondEventDate = new Date('Nov 09, 2017 10:18:40'); 
 
var currentTime = now.getTime(); 
 
var evenTime = eventDate.getTime(); 
 

 
if(eventDate<=currentTime){ 
 
    document.getElementById("countdown").innerHTML = "expired"; 
 
    clearInterval(setTimeout); 
 

 
} 
 

 
var remTime = evenTime - currentTime; 
 

 
var sec = Math.floor(remTime/1000); 
 
var min = Math.floor(sec/60); 
 
var hur = Math.floor(min/60); 
 
var day = Math.floor(hur/24); 
 

 
hur %= 24; 
 
min %= 60; 
 
sec %= 60; 
 

 
hur = (hur < 10) ? "0" + hur : hur; 
 
min = (min < 10) ? "0" + min : min; 
 
sec = (sec < 10) ? "0" + sec : sec; 
 

 
$('.seconds').text(sec); 
 
$('.minutes').text(min); 
 
$('.hours').text(hur); 
 
$('.days').text(day); 
 

 
setTimeout(countdown, 1000); 
 
} 
 

 
countdown(); 
 

 

 
});

Answer 1

코드를 조금 정리할 수 있습니다. 우리는이처럼 타이머를 필요로 이제

const addZero = n => n < 10 ? "0" + n : n; 
const format = ms => { 
    const result = []; 
    [1000,60,60,24,31].reduce((carry, max) => { 
     result.unshift(carry % max); 
     return Math.floor(carry/max); 
    },ms); 
    result.pop();//remove milliseconds 
    return result.map(addZero).join(":"); 
}; 

:

설정에 따라서

class Timer { 
    constructor(to, el, finish){ 
    this.to = to; 
    this.el = el; 
    this.finish = finish; 
    setTimeout(_ => this.update(), 1000); 
    } 
    update(){ 
    const ms = this.to - Date.now(); 
    this.el.innerHTML = format(ms); 
    if(ms < 0){ 
     this.finish(); 
    }else{ 
     setTimeout(_ => this.update(), 1000); 
    } 
    } 
} 

타이머 :

new Timer(
    new Date('Nov 03, 2017 13:02:20'), 
    document.body, 
    () => new Timer(
     new Date('Nov 03, 2017 13:02:20'), 
     document.body, 
     _ => _ 
    ) 
); 

Try it