JS特定の日付までのカウントダウンタイマー

Question

現在、カウントダウンタイマーは33日からカウントダウンされていますが、これはページがリロードされるたびに再開します。これを変更して、16/01/2017までカウントダウンするので、ページが読み込まれるたびに同じ金額にリセットされません。

デッドライン変数を'12/01/2017 'に設定しようとしましたが、カウントダウンの四角に「Na」が表示されます。

ありがとうございました。

$(document).ready(function() { 
 

 
function getTimeRemaining(endtime) { 
 
    var t = endtime - new Date().getTime(); 
 
    var seconds = Math.floor((t/1000) % 60); 
 
    var minutes = Math.floor((t/1000/60) % 60); 
 
    var hours = Math.floor((t/(1000 * 60 * 60)) % 24); 
 
    var days = Math.floor(t/(1000 * 60 * 60 * 24)); 
 
    return { 
 
    'total': t, 
 
    'days': days, 
 
    'hours': hours, 
 
    'minutes': minutes, 
 
    'seconds': seconds 
 
    }; 
 
} 
 

 
function initializeClock(id, endtime) { 
 
    var clock = document.getElementById(id); 
 
    var daysSpan = clock.querySelector('.days'); 
 
    var hoursSpan = clock.querySelector('.hours'); 
 
    var minutesSpan = clock.querySelector('.minutes'); 
 
    var secondsSpan = clock.querySelector('.seconds'); 
 

 
    function updateClock() { 
 
    var t = getTimeRemaining(endtime); 
 

 
    daysSpan.innerHTML = t.days; 
 
    hoursSpan.innerHTML = ('0' + t.hours).slice(-2); 
 
    minutesSpan.innerHTML = ('0' + t.minutes).slice(-2); 
 
    secondsSpan.innerHTML = ('0' + t.seconds).slice(-2); 
 

 
    if (t.total <= 0) { 
 
     clearInterval(timeinterval); 
 
    } 
 
    } 
 

 
    updateClock(); 
 
    var timeinterval = setInterval(updateClock, 1000); 
 
} 
 

 
var deadline = new Date(new Date().getTime() + 33 * 24 * 60 * 60 * 1000); 
 
initializeClock('clockdiv', deadline); 
 

 
});

#clockdiv{ 
 
    font-family: sans-serif; 
 
    color: #fff; 
 
    display: inline-block; 
 
    font-weight: 100; 
 
    text-align: center; 
 
    font-size: 30px; 
 
} 
 

 
#clockdiv > div{ 
 
    padding: 10px; 
 
    border-radius: 3px; 
 
    background: #00BF96; 
 
    display: inline-block; 
 
} 
 

 
#clockdiv div > span{ 
 
    padding: 15px; 
 
    border-radius: 3px; 
 
    background: #00816A; 
 
    display: inline-block; 
 
} 
 

 
.smalltext{ 
 
    padding-top: 5px; 
 
    font-size: 16px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="clockdiv"> 
 
    <div> 
 
    <span class="days"></span> 
 
    <div class="smalltext">Days</div> 
 
    </div> 
 
    <div> 
 
    <span class="hours"></span> 
 
    <div class="smalltext">Hours</div> 
 
    </div> 
 
    <div> 
 
    <span class="minutes"></span> 
 
    <div class="smalltext">Minutes</div> 
 
    </div> 
 
    <div> 
 
    <span class="seconds"></span> 
 
    <div class="smalltext">Seconds</div> 
 
    </div> 
 
</div>

Answer 1

$(document).ready(function() { 
 

 
function getTimeRemaining(endtime) { 
 
    var t = endtime - new Date().getTime(); 
 
    var seconds = Math.floor((t/1000) % 60); 
 
    var minutes = Math.floor((t/1000/60) % 60); 
 
    var hours = Math.floor((t/(1000 * 60 * 60)) % 24); 
 
    var days = Math.floor(t/(1000 * 60 * 60 * 24)); 
 
    return { 
 
    'total': t, 
 
    'days': days, 
 
    'hours': hours, 
 
    'minutes': minutes, 
 
    'seconds': seconds 
 
    }; 
 
} 
 

 
function initializeClock(id, endtime) { 
 
    var clock = document.getElementById(id); 
 
    var daysSpan = clock.querySelector('.days'); 
 
    var hoursSpan = clock.querySelector('.hours'); 
 
    var minutesSpan = clock.querySelector('.minutes'); 
 
    var secondsSpan = clock.querySelector('.seconds'); 
 

 
    function updateClock() { 
 
    var t = getTimeRemaining(endtime); 
 

 
    daysSpan.innerHTML = t.days; 
 
    hoursSpan.innerHTML = ('0' + t.hours).slice(-2); 
 
    minutesSpan.innerHTML = ('0' + t.minutes).slice(-2); 
 
    secondsSpan.innerHTML = ('0' + t.seconds).slice(-2); 
 

 
    if (t.total <= 0) { 
 
     clearInterval(timeinterval); 
 
    } 
 
    } 
 

 
    updateClock(); 
 
    var timeinterval = setInterval(updateClock, 1000); 
 
} 
 

 
var deadline = Date.parse('Jan 16, 2017'); 
 
initializeClock('clockdiv', deadline); 
 

 
});

#clockdiv{ 
 
    font-family: sans-serif; 
 
    color: #fff; 
 
    display: inline-block; 
 
    font-weight: 100; 
 
    text-align: center; 
 
    font-size: 30px; 
 
} 
 

 
#clockdiv > div{ 
 
    padding: 10px; 
 
    border-radius: 3px; 
 
    background: #00BF96; 
 
    display: inline-block; 
 
} 
 

 
#clockdiv div > span{ 
 
    padding: 15px; 
 
    border-radius: 3px; 
 
    background: #00816A; 
 
    display: inline-block; 
 
} 
 

 
.smalltext{ 
 
    padding-top: 5px; 
 
    font-size: 16px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="clockdiv"> 
 
    <div> 
 
    <span class="days"></span> 
 
    <div class="smalltext">Days</div> 
 
    </div> 
 
    <div> 
 
    <span class="hours"></span> 
 
    <div class="smalltext">Hours</div> 
 
    </div> 
 
    <div> 
 
    <span class="minutes"></span> 
 
    <div class="smalltext">Minutes</div> 
 
    </div> 
 
    <div> 
 
    <span class="seconds"></span> 
 
    <div class="smalltext">Seconds</div> 
 
    </div> 
 
</div>

実際の変化がラインに追従しています。

var deadline = new Date(new Date('01 16 2017').getTime()); 

の値は、ユーザーのローカライゼーションの日付形式である必要があります。それ以外の場合は、NaNとなります。

編集1

使用Date.parse（MMM ddと、YYYY）の局在を気にせずに日付文字列を解析します。

var deadline = Date.parse('Jan 16, 2017');