リフレッシュ時のカウントダウンリロード

Question

毎回ページをリフレッシュすると、カウントダウンタイマーがリロードされます。私が見つけたのは、ローカルストレージを使用する必要があるということです（私は推測します）。しかし、私はこのJavaScriptのカウントダウンコードでどのように実装できましたか？ここ は、あなたはそれが特定の時刻にカウントダウンしたい場合は、このページを見てみましょうことができ、私のJSフィドル https://jsfiddle.net/BrsJsk/srv3ywnL/

function getTimeRemaining(endtime) { 
 
    var t = Date.parse(endtime) - Date.parse(new Date()); 
 
    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(Date.parse(new Date()) + 59 * 24 * 60 * 60 * 1000); 
 
initializeClock('clockdiv', deadline);

<div id="clockdiv"> 
 
     <p1 class="dayss"><span class="num days">34</span> days</p1> 
 
     <p1 class="hourss"><span class="num hours">16</span> hours</p1> 
 
     <p1 class="secondss"><span class="num seconds">1</span> secs</p1> 
 
     <p1 class="minutess"><span class="num minutes">19</span> mins</p1> 
 
    </div>

Answer 1

あなたがする必要がありますからにカウントダウンする静的な瞬間を維持する。あなたのコードで毎回現在の日付を取得しているので、ロード時にリセットされます。

JSFiddle： https://jsfiddle.net/xrwm51sg/

キーの行は、次のようになります。

var deadline = new Date("Oct 2, 2020 12:30:00").getTime(); 

次に、あなたが今、時間の電流量によってマイナス今回でしょう。

var t = endtime - new Date().getTime(); 

全作業コード：

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("Oct 2, 2020 12:30:00").getTime(); 
initializeClock('clockdiv', deadline); 

Answer 2

です：https://www.w3schools.com/howto/howto_js_countdown.asp

Answer 3

あなたは、ローカルストレージを使用してこれを行うことができ、ここでのlocalStorage

<div id="clockdiv"> 
    <p1 class="dayss"><span class="num days">34</span> days</p1> 
    <p1 class="hourss"><span class="num hours">16</span> hours</p1> 
    <p1 class="secondss"><span class="num seconds">1</span> secs</p1> 
    <p1 class="minutess"><span class="num minutes">19</span> mins</p1> 
</div> 
<script> 

function getTimeRemaining(endtime) { 
    var t = Date.parse(endtime) - Date.parse(new Date()); 
    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); 
    //var value = parseInt(endtime); 
    localStorage.setItem("counter", 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); 
} 

    if(localStorage.getItem("counter")){ 
    var deadline = localStorage.getItem("counter"); 
    }else{ 
     var deadline = new Date(Date.parse(new Date()) + 59 * 24 * 60 * 60 * 1000); 
    } 

initializeClock('clockdiv', deadline); 
</script> 

ここ

であなたのコードがある私は推測フィドルhttps://jsfiddle.net/abhaybhosale/3eg99sxa/1/