使用 jQuery 创建一个 "real time" 倒数计时器

Question

每次刷新页面时，我的倒数计时器都会重置。无论页面刷新多少次，我都需要这个倒计时只在它达到零时重置。

我不知道如何让倒数计时器那样工作，你能帮我吗？

我需要这样的东西：https://intellywp.com/evergreen-countdown-timer

这是我的代码：

function contador() {
 var hr = "23";
 var mm = "59";
 var ss = "59";

    var interval = setInterval(function(){

        if(hr == 0 && mm == 0 && ss == 0)clearInterval(interval);
        ss--;
        if(ss == 0)
        {
            ss = 59;
            mm--;
            if(mm == 0)
            {
                mm = 59;
                hr--;
            }
        }

        if(hr.toString().length < 2) hr = "0"+hr;
        if(mm.toString().length < 2) mm = "0"+mm;
        if(ss.toString().length < 2) ss = "0"+ss;
        $("#contador").html("<span class='hora'>"+hr+"</span> : <span class='minuto'>"+mm+"</span> : <span class='segundo'>"+ss+'</span>');

    },1000)
}
window.onload = contador;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="contador" class="py-4"></div>

Answer 1

在每个时间间隔，只需将一些内容设置到本地存储即可：

function contador() {

 var hr = localStorage.getItem('hr');
    var mm = localStorage.getItem('mm');
 var ss = localStorage.getItem('ss');
    if (!hr || !mm || !ss) {
        hr = "23";
        mm = "59";
        ss = "59";
        localStorage.setItem('hr', hr);
        localStorage.setItem('mm', mm);
        localStorage.setItem('ss', ss);
    }

    var interval = setInterval(function(){

        if(hr == 0 && mm == 0 && ss == 0)clearInterval(interval);
        ss--;
        if(ss == 0)
        {
            ss = 59;
            mm--;
            if(mm == 0)
            {
                mm = 59;
                hr--;
            }
        }

        if(hr.toString().length < 2) hr = "0"+hr;
        if(mm.toString().length < 2) mm = "0"+mm;
        if(ss.toString().length < 2) ss = "0"+ss;
        $("#contador").html("<span class='hora'>"+hr+"</span> : <span class='minuto'>"+mm+"</span> : <span class='segundo'>"+ss+'</span>');

          localStorage.setItem('hr', hr);
          localStorage.setItem('mm', mm);
          localStorage.setItem('ss', ss);

    },1000)
}
window.onload = contador;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="contador" class="py-4"></div>

注意：如果 any 变量从本地存储中丢失，计时器将重置为 23:59:59。

Answer 2

我对它进行了一些修改以满足我的需要，但这是最好的解决方案。

function contador() {

    var hr = $('input[name="hr"]').val();
    var mm = $('input[name="mm"]').val();
    var ss = $('input[name="ss"]').val();

    var interval = setInterval(function(){

        if(hr == 0 && mm == 0 && ss == 0)clearInterval(interval);
        ss--;
        if(ss == 0) {
            ss = 59;
            mm--;
            if(mm == 0) {
                mm = 59;
                hr--;
            }
        }

        if(hr.toString().length < 2) hr = "0"+hr;
        if(mm.toString().length < 2) mm = "0"+mm;
        if(ss.toString().length < 2) ss = "0"+ss;
        $("#contador").html("<span class='hora'>"+hr+"</span>h <span class='minuto'>"+mm+"</span>m <span class='segundo'>"+ss+'</span>s');

    },1000)
}
window.onload = contador;

使用 jQuery 创建一个 "real time" 倒数计时器

Create a "real time" countdown timer with jQuery

html

javascript

jquery

timer

countdown