Question

我不太了解JavaScript，但我必须在我的项目中使用它。

我需要倒计时器，刷新页面不会停止，不会被清除并显示所有时间。

按下按钮后，您将重定向到其他页面，countown start ant按钮具有＆＃39; disable值。倒计时后，按钮自动必须具有enable值。

这是我的项目：http://licznikii.cba.pl/dopostu/

在我的第一个版本中，一切正常，但不是在刷新页面之后。倒计时已清除。

在我的第二个版本中，我使用了LocalStorage并且它很好但不是很多，我不会。刷新页面数量后隐藏。倒计时后按钮没有自动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>

倒计时和本地存储

1 个答案: