用户输入倒计时

时间:2014-09-16 09:00:56

标签: javascript jquery html

我没有定义,按下开始时NaN返回。 用户应该能够输入数字,倒计时将从输入开始。可以感谢一些帮助:)

HTML:

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-2.1.1.js"></script>
    <script src="Timer.js"></script>
    <title>Uppgift2</title>
</head>
<body>
    <form id="frm">
        Seconds:
        <input type="text" id="seconds" name="seconds" value="0" />
        <br />
        <input type="button" id="btnct" value="Input" />
    </form>
    <span id="timespan"></span>
    <input type="button" value="Start" onclick="countdown()">
    <p id="para"></p>
</body>
</html>

的Javascript / $:

$(document).ready(function () {
    $('#btnct').click(function () {
        var CCOUNT = $('#seconds').val();
        $("#para").text(CCOUNT);
    });
});
var t, count;

function cddisplay() {
    document.getElementById('timespan').innerHTML = count;
}

function countdown() {
    cddisplay();
    if (count === 1) {
    } else {
        count--;
        t = setTimeout(countdown, 1000);
    }
}

谢谢!

2 个答案:

答案 0 :(得分:1)

您的代码存在问题。

1。计数始终未定义。

你从未初始化计数。你在代码中有两个变量。保留CCOUNT中的值,并将dint传递给计数器中使用的实际count

2。在#btnct点击中获得的计数值是一个局部变量

因此,当您使用获得的值初始化CCOUNT时,CCOUNT是一个无法在侦听器函数外部访问的局部变量。因此,最好将其设置为全局,以便您可以从已定义的其他功能访问它。

3。 .val()返回一个字符串,您需要将其转换为int

在您的代码中,您直接使用通过.val()方法获得的值。当你直接执行减量时,这将是一个字符串并且会弄乱计算。相反,您必须使用parseInt将其转换为int。

4。使用命名空间。

而是使用全局范围。您可以参考如何创建命名空间并组织代码,以便在应用程序代码增加时使您免于与其他现有代码冲突。即使你可以将cddisplaycountdowntcount移动到document.ready's lister函数范围,因为它不会污染全局范围,如Dipen Bagia所示。回答。

var t, count;

$(document).ready(function () {
    $('#btnct').click(function () {
        count = parseInt($('#seconds').val(),10);
        $("#para").text(count);
    });
});


function cddisplay() {
    document.getElementById('timespan').innerHTML = count;
}

function countdown() {
    cddisplay();
    if (count === 1) {
    } else {
        count--;
        t = setTimeout(countdown, 1000);
    }
}

Working Fiddle

答案 1 :(得分:-1)

我同意罗布。这是工作代码:

$(document).ready(function () {
    $('#btnct').click(function () {
            var CCOUNT = $('#seconds').val();
            $("#para").text(CCOUNT);
        });
    });
    var t, count = 0;

    function cddisplay() {
        document.getElementById('timespan').innerHTML = count;
          if (count === 1) {
        } else {
            count--;
            t = setTimeout(cddisplay, 1000);
        }
    }

    function countdown() {
        count = $('#seconds').val();
        cddisplay();

    }