Обратный отсчет и локальное хранилище

Question

Я не очень хорошо знаю JavaScript, но я должен использовать его в своем проекте.

Мне нужны таймеры обратного отсчета, которые после обновления страницы не останавливаются, не очищаются и не отображаются все время.

После нажатия кнопки вы переадресовываете на другую страницу, кнопка запуска startown ant имеет значение «disable». После обратного отсчета время автоматически должно иметь значение enable.

Вот мой проект: http://licznikii.cba.pl/dopostu/

В моей первой версии все работает хорошо, но не после обновления страницы. Обратные отсчеты очищаются.

В моей второй версии я использовал LocalStorage, и это хорошо работает, но не так много, что я не буду. После обновления страницы countowns скрыты. После кнопки времени обратного отсчета не будет автоматически enable значение, но после обновления. После обновления страницы после обратного отсчета все проявляется хорошо.

Пожалуйста, помогите

Answer 1

После изменения вашей второй-версии она работает. Я тестировал его во всех браузерах. Извините за не код-рефакторинг, но я думаю, что вы справиться с этим сейчас :)

<!-- -------------------------------------------------------- SECOND VERSION --> 
<script> 
$(document).ready(function(){ 

    $('#defaultCountdown3').countdown({until: 0, onTick: highlightLast5}); 

    var teraz = Date.now(); 
    var zapisanyCzas = localStorage.getItem("defaultCountdown3"); 

    if (zapisanyCzas !== null && teraz < +zapisanyCzas) { 

     var restTime = secDiff(teraz, +zapisanyCzas); 
     console.log(restTime); 

     $("#YourButton3").prop('disabled',true); 
     $('#defaultCountdown3').removeClass('highlight').countdown('option', {until: Math.round(restTime), onExpiry: countdownFinished}); 

    } else { 
     localStorage.removeItem("defaultCountdown3"); 
    } 

    function highlightLast5(periods) { 
    if ($.countdown.periodsToSeconds(periods) === 5) { 
     $(this).addClass('highlight'); 
     } 
    } 

    $('#YourButton3').click(function() { 
     localStorage.setItem("defaultCountdown3", Date.now() + 60 * 1000); 
     $('#defaultCountdown3').removeClass('highlight').countdown('option', {until: 60, onExpiry: countdownFinished}); 
     $("#YourButton3").prop('disabled',true) 
    }); 

    function countdownFinished(){ 
     // Finished - disable your button 
     localStorage.removeItem("defaultCountdown3"); 
     $("#YourButton3").prop('disabled',false) 
    } 

    function secDiff(start, end){ 
     var diff = Math.abs(start-end); 
     return (diff/1000); 
    } 

}); 
</script> 


<script> 
$(document).ready(function(){ 

    $('#defaultCountdown4').countdown({until: 0, onTick: highlightLast5}); 

    var teraz = Date.now(); 
    var zapisanyCzas = localStorage.getItem("defaultCountdown4"); 

    if (zapisanyCzas !== null && teraz < +zapisanyCzas) { 

     var restTime = secDiff(teraz, +zapisanyCzas); 
     console.log(restTime); 

     $("#YourButton4").prop('disabled',true); 
     $('#defaultCountdown4').removeClass('highlight').countdown('option', {until: Math.round(restTime), onExpiry: countdownFinished}); 


    } else { 
     localStorage.removeItem("defaultCountdown4"); 
    } 

    function highlightLast5(periods) { 
    if ($.countdown.periodsToSeconds(periods) === 5) { 
     $(this).addClass('highlight'); 
     } 
    } 

    $('#YourButton4').click(function() { 
     localStorage.setItem("defaultCountdown4", Date.now() + 120 * 1000); 
     $('#defaultCountdown4').removeClass('highlight').countdown('option', {until: 120, onExpiry: countdownFinished}); 
     $("#YourButton4").prop('disabled',true) 
    }); 

    function countdownFinished(){ 
     // Finished - disable your button 
     localStorage.removeItem("defaultCountdown4"); 
     $("#YourButton4").prop('disabled',false) 
    } 

    function secDiff(start, end){ 
     var diff = Math.abs(start-end); 
     return (diff/1000); 
    } 

}); 
</script>