javascript - jquery 倒数计时器 NaN

Question

嗨，我是 JS 和 jQuery 的新手，我对简单的倒计时器有疑问。

当我在输入中输入一些值时，它会在倒计时器中转换为 NaN(而不是数字)。

这是我的代码:

$(function() {
    var $input = $('#time'),
        seconds = parseInt($input.val()),
        $start = $('button');

    $start.on('click', function() {
        var interval = setInterval(function() {

            switch (seconds) {
                case 0:
                    clearInterval(interval);
                    console.log("Time's UP!");
                    break;
                case 1:
                    console.log("Do końca pozostała " + seconds + " sekunda"); /*polish gramaticall variation*/
                    break;
                case 4:
                case 3:
                case 2:
                    console.log("Do końca pozostało " + seconds + " sekundy"); /*polish gramaticall variation*/
                    break;
                default:
                    console.log("Do końca pozostało " + seconds + " sekund"); /*polish gramaticall variation*/
            }
            seconds = seconds - 1;
        }, 1000);
    });
});

HTML:

<label for="time">Set time in seconds </label>
<input type="text" id="time">
<button>Start</button>

Answer 1

您仅在 document.ready 上分配 seconds 的值，因此它的初始值只有 "" - 其中解析为 NaN。将其移至 .click 处理程序中，以便每次单击按钮时都会更新秒数:

var seconds = 0;
$start.on('click', function(){
    seconds = parseInt($input.val(), 10); // Always pass a radix to parseInt
    ....
});

jsFiddle