3日ごとのカウントダウンタイマー

Question

私は少し混乱しています。私は月の最初の日に3日間カウントを開始する必要があります。有効期限が再開されるまでに。

var today = new Date(), 
 
    end = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 3); 
 

 
var timer = setInterval(function() { 
 
    var differenceTime, dd, hh, mm, ss, str; 
 

 
    if ((new Date().getDate() == end.getDate()) || (new Date().getDate() == 1)) { 
 
    end = new 
 
    } else { 
 
    differenceTime = end - new Date(); 
 

 
    dd = parseInt(differenceTime/(1000 * 60 * 60 * 24)); 
 
    hh = parseInt(differenceTime/(60 * 60 * 1000)) % 24; 
 
    mm = parseInt(differenceTime/(1000 * 60)) % 60; 
 
    ss = parseInt(differenceTime/1000) % 60; 
 

 
    document.querySelector('.days').innerHTML = format(dd); 
 
    document.querySelector('.hours').innerHTML = format(hh); 
 
    document.querySelector('.minutes').innerHTML = format(mm); 
 
    document.querySelector('.seconds').innerHTML = format(ss); 
 
    } 
 
}, 1000); 
 

 
function format(num) { 
 
    return (9 < num) ? num : "0" + num; 
 
};

<div class="cowntdown"> 
 
    <span class="days"></span> 
 
    <span class="hours"></span> 
 
    <span class="minutes"></span> 
 
    <span class="seconds"></span> 
 
</div>

<div class="cowntdown"> 
 
    <span class="days"></span> 
 
    <span class="hours"></span> 
 
    <span class="minutes"></span> 
 
    <span class="seconds"></span> 
 
</div>

右の条件を作るのに役立ちます。

Answer 1

可能な限り多くのコードを再利用しようとしました。私があなたの問題を正しく理解していれば、これはやるべきことです。 moment.jsを使用すると、特にテキストを書式設定して日付の差異を計算するときに、よりクリーンなコードを取得できます。

チェックは秒までの日付を比較するため、完全に正確ではありません。

var numberOfDays = 3; 
 
var today = new Date(); 
 
var start = getNextStartDate(today); 
 
var end = getNextEndDate(today); 
 

 
var timer = setInterval(function() { 
 
    var differenceTime, dd, hh, mm, ss, str; 
 
    var now = new Date(); 
 
    if (now >= end) { 
 
    start = getNextStartDate(now); 
 
    end = getNextEndDate(now); 
 
    } else { 
 
    differenceTime = end - now; 
 

 
    dd = parseInt(differenceTime/(1000 * 60 * 60 * 24)); 
 
    hh = parseInt(differenceTime/(60 * 60 * 1000)) % 24; 
 
    mm = parseInt(differenceTime/(1000 * 60)) % 60; 
 
    ss = parseInt(differenceTime/1000) % 60; 
 

 
    document.querySelector('.days').innerHTML = format(dd); 
 
    document.querySelector('.hours').innerHTML = format(hh); 
 
    document.querySelector('.minutes').innerHTML = format(mm); 
 
    document.querySelector('.seconds').innerHTML = format(ss); 
 
    } 
 
}, 1000); 
 

 
function getNextEndDate(fromDate) { 
 
    return new Date(fromDate.getFullYear(), fromDate.getMonth(), fromDate.getDate() + numberOfDays); 
 
} 
 

 
function getNextStartDate(currentDate) { 
 
    var currentDay = currentDate.getDate(); 
 
    var index = Math.ceil(currentDay/3); 
 
    var nextStartDay = 1 + numberOfDays * index 
 
    return new Date(currentDate.getFullYear(), currentDate.getMonth(), nextStartDay); 
 
} 
 

 
function format(num) { 
 
    return (9 < num) ? num : "0" + num; 
 
};

<div class="cowntdown"> 
 
    <span class="days"></span> 
 
    <span class="hours"></span> 
 
    <span class="minutes"></span> 
 
    <span class="seconds"></span> 
 
</div>

jsfiddleあなたは