带有cookie的JavaScript倒计时计时器在一分钟后停止

JavaScript countdown timer with cookies stops after one minute

本文关键字：一分钟 计时器 cookie JavaScript 倒计时 带有      更新时间：2023-09-26

我有这个倒计时计时器。由于某种原因，它在一分钟后停止计数——它只是停止了。如果我数55分钟，它会在54:00停止如果我数2分钟，它会在1点停止有什么想法吗？我该如何修复它，使其持续到零？

这里是JSFiddle链接：带cookie的倒计时

和JS代码：

function countdown(minutes) {
var seconds = 60;
var mins = minutes;
if(getCookie("minutes")&&getCookie("seconds"))
{
     var seconds = getCookie("seconds");
     var mins = getCookie("minutes");
}
function tick() {
    var counter = document.getElementById("timer");
    setCookie("minutes",mins,10)
    setCookie("seconds",seconds,10)
    var current_minutes = mins-1
    seconds--;
    counter.innerHTML = 
    current_minutes.toString() + ":" + (seconds < 10 ? "0" : "") + String(seconds);
    //save the time in cookie

    if( seconds > 0 ) {
        setTimeout(tick, 1000);
    } else {
            if(mins > 1){
               // countdown(mins-1);   never reach “00″ issue solved:Contributed by Victor Streithorst    
               setTimeout(function () { countdown(mins - 1); }, 1000);
            }
        }
    }
    tick();
}
function setCookie(cname,cvalue,exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    var expires = "expires=" + d.toGMTString();
    document.cookie = cname+"="+cvalue+"; "+expires;
}
 function getCookie(cname) {
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i=0; i<ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1);
        if (c.indexOf(name) == 0) {
            return c.substring(name.length, c.length);
        }
    }
    return "";
}
countdown(55);

我不知道你为什么在这里使用cookie，但抛开这一点不谈，你的问题似乎是以下几行：

var seconds = getCookie("seconds");
var mins = getCookie("minutes");

在你的代码中，在你完成第一分钟后，你用少一分钟的时间再次调用倒计时函数。但是，上面的行会将分钟变量返回到以前的值。所以你在一分钟后被困在同一分钟。

所以，我想，你只需要从cookie中获取一次时间（第一次倒计时）。你可以使用这样的东西：

var firstTime = true;
function countdown(minutes) {
    var seconds = 60;
    var mins = minutes;
    if(firstTime && getCookie("minutes")&&getCookie("seconds"))
    {
        firstTime = false;
        seconds = getCookie("seconds");
        mins = getCookie("minutes");
    }
    ...

请注意，在if子句中var是不必要的，因为您已经定义了CCD_ 2和CCD_。

支持天：小时：分钟：秒的代码。只需将分钟数添加到计时器范围中即可。对于一天的测试，我输入了1440分钟。

<html>
<body>
<span id="countdown" class="timer">1440</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>
相关文章：