刷新倒計時

每次刷新頁面，倒數計時器都會重新加載。我發現我需要使用本地存儲（我猜），但我怎麼能夠在這個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>

來源

2017-05-03 BrS

我猜你可以使用cookie ... – Sank6

@SankarshMakam本地存儲比Cookie更容易。在'window.unload'上，設置一個當前剩餘時間的本地存儲 - 'localStorage.setItem（'clock'，someVar）'然後在頁面加載，'if（localStorage.getItem（'clock'））{var deadline = localStorage.getItem（ '時鐘'）; }其他{var deadline = new Date（）; }' –

你是說你希望倒計時暫停，然後在用戶回來時恢復？你需要像你說的那樣存儲。否則，如果你想讓它繼續倒計時，即使用戶離開了一段時間後又回來了，你需要及時開始倒計時到一個固定的位置。 –

您需要及時保持靜態時刻倒數至。代碼中的每一次都會獲取當前日期，因此它會在重載時重置。

的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);

來源

2017-05-03 17:23:02

如果你希望它倒計時到一個特定的時間，你可以看看這個頁面：https://www.w3schools.com/howto/howto_js_countdown.asp

來源

2017-05-03 17:15:29

雖然這可能在理論上回答這個問題，但[這將是更可取的]（http://meta.stackoverflow.com/q/8259）在這裏包括了答案的基本部分，並提供了供參考的鏈接。 –

爲此，您可以使用本地存儲，這是與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/

來源

2017-05-03 18:05:42 CyberAbhay

回答

相關問題