带输入字段的倒数计时器

Question

我敢肯定有人已经解决了这个问题，但我似乎无法找到它。

我有一个非常基本的倒计时，用户在输入字段中输入分钟数，单击按钮，它就会倒计时。

我想知道的是只是倒计时到忽略刷新页面（继续曾是）。目前，它只是停止倒计时。

这是我目前的情况。

HTML:

<form>
<input id="tminus" placeholder="0:00"></input>
<input id="request" placeholder="Enter Minutes here"></input>
<a href="#" class="button enterTime">Submit Time</a>
 <input type="reset" value="Clear form" />
</form>

JS:

$('.enterTime').click(function () {
    var reqVal = $('#request').val();
    var parAmt = parseInt(reqVal);
    var totalAmount = parAmt * 60;
     $('#request').val(" ");

    var timeloop, timeSet = function () {

        totalAmount--;

        var minutes = parseInt(totalAmount/60);
        var seconds = parseInt(totalAmount%60);

        if(seconds < 10)
            seconds = "0"+seconds;
        $('#tminus').val(minutes + ":" + seconds);
    };

    var timeloop  = setInterval(timeSet, 1000);

})

感谢大家的帮助。

Answer 1

您可以将 totalAmount 保存到 localStorage 并在用户刷新页面时从那里获取值。这是您需要的：

Fiddle

// Get totalAmount from localStorage and if there is positive value call timeSet() immediately
var totalAmount = localStorage.getItem('countDown') || 0,
    timeloop;

if (totalAmount) {
    timeSet()
}

function timeSet () {
    totalAmount--;
    // Refresh value in localStorage
    localStorage.setItem('countDown', totalAmount);

     // If countdown is over, then remove value from storage and clear timeout
     if (totalAmount < 0 ) {
         localStorage.removeItem('countDown');
         totalAmount = 0;
         clearTimeout(timeloop);
         return;
     }

    var minutes = parseInt(totalAmount/60);
    var seconds = parseInt(totalAmount%60);

    if(seconds < 10)
        seconds = "0"+seconds;

    $('#tminus').val(minutes + ":" + seconds);

    timeloop = setTimeout(timeSet, 1000);
}

$('.enterTime').click(function () {
    var reqVal = $('#request').val();
    var parAmt = parseInt(reqVal);

    if (timeloop) {
        clearTimeout(timeloop)
    }

    totalAmount = parAmt * 60;

    $('#request').val(" ");

    timeSet();
})

// Clear timeout and remove localStorage value when resetting form
$('#countdown').on('reset', function () {
    totalAmount = 0;
    clearTimeout(timeloop);
    localStorage.removeItem('countDown');
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="countdown">
    <input id="tminus" placeholder="0:00" />
    <input id="request" placeholder="Enter Minutes here" />
    <a href="#" class="button enterTime">Submit Time</a>
    <input type="reset" value="Clear form" />
</form>

带输入字段的倒数计时器

Countdown Timer with Input Field

jquery

html

refresh

countdown

jquery-countdown

Fiddle