倒计时和本地存储

Question

我不是很了解JavaScript但我必须在我的项目中使用它

我需要倒数计时器，它在刷新页面后不会停止，不会被清除并一直显示。

按下按钮后您将重定向到其他页面，countown start 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>

倒计时和本地存储

Countdown and local storage

javascript

countdown

local-storage