Persistent jQuery Countdown

问题描述 投票:0回答:1

我们正在尝试从5天开始设置倒计时。我们设法使用下面的代码使其工作。但是,当您重新加载页面时,它会刷新回5天。我想知道我们如何做到这一点,以使您在刷新或重新加载页面时不会将其重置为5天。我对Javascript的了解很少,我对下一步的工作一无所知。

<html>
<body>
<span id="countdown" class="timer">7200</span>
<script type="text/javascript">

var first_time = true;
var countdownTimer;
var seconds = document.getElementById('countdown').innerHTML * 60;
//alert(seconds);
if(!isNaN(seconds) && seconds > 0 ) {

    function timer() {

        if(first_time) {
            countdownTimer = setInterval('timer()', 1000);
            first_time = false;
        }

        var days        = Math.floor(seconds/24/60/60);
        var hoursLeft   = Math.floor((seconds) - (days*86400));
        var hours       = Math.floor(hoursLeft/3600);
        var minutesLeft = Math.floor((hoursLeft) - (hours*3600));
        var minutes     = Math.floor(minutesLeft/60);
        var remainingSeconds = seconds % 60;
        if (remainingSeconds < 10) {
            remainingSeconds = "0" + remainingSeconds; 
        }
        document.getElementById('countdown').innerHTML = (days < 10 ? "0" : "") + days + ":" + (hours < 10 ? "0" : "") + hours + ":" + (minutes < 10 ? "0" : "") + minutes + ":" + (remainingSeconds < 10 ? "0" : "") + remainingSeconds;
        if (seconds == 0) {
            clearInterval(countdownTimer);
            document.getElementById('countdown').innerHTML = "Completed";
        } else {
            seconds--;
        }
    }

    timer()

    //var countdownTimer = setInterval('timer()', 1000);
}
</script>
</body>
</html>


jquery jquery-plugins countdown
1个回答
0
投票

检查网络存储支持,并将其用于存储您的计数器;如果没有支持,则将计数器存储在cookie中:

if (typeof(Storage) !== "undefined") {
    // You can use localStorate to store the seconds
    localStorage.setItem("seconds", secs);
} else {
    // Sorry! No Web Storage support.. use cookie
}

然而,在页面加载时运行的代码开头,请读取计数器并从上次中断的地方继续:

var seconds;
if (typeof(Storage) !== "undefined" && localStorage.seconds) {
    seconds = localStorage.getItem("seconds");
} else if (typeof(Storage) === "undefined") {
    //read cookie (if using cookie)
} else {
    seconds = document.getElementById('countdown').innerHTML * 60;
}

Fiddle Demo

© www.soinside.com 2019 - 2024. All rights reserved.