Question

我是JQuery和Javascript的新手，我尝试编写一个小的setTimeout函数，但似乎无法正常工作。下面是我的代码，有人可以通过指出这里的错误来帮助解决。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>countdown</title>
  <script type="text/javascript" src="/jquery-2.1.4.js"></script>
  <script>
    $("#submit").click(function(){
        var timeVal = $("#input").val();
        var mainTimeVal = timeVal.split(":");
        var minute = parseInt(mainTimeVal[0]);
        var second = parseInt(mainTimeVal[1]);
        //console.log( second);

        setTimeout(function () {

            if (minute == 0 && second == 0) {
                alert("no time left");
            }
            else if (second !== 0) {
                second--;
            }
            else {
                minute--;
                second = 60;
            }
            second--;
        }, 1000);
    });
  </script>
</head>
 <body>
   <input type="text" id="input" value="25:23"/><br>
   <button type="button" id="submit" value="send"></button>
 </body>
</html>

Answer 1

您的代码在.click按钮上的submit上执行 - 这意味着它仅在您单击按钮时执行。同样使用setTimeout你只运行一次，并且通过函数的内部逻辑，你似乎希望它继续运行。将setTimeout替换为setInterval以使其继续运行。

`$（ “＃提交”）。点击（函数（）{ var timeVal = $（“＃input”）。val（）; var mainTimeVal = timeVal.split（“：”）; var minute = parseInt（mainTimeVal [0]）; var second = parseInt（mainTimeVal [1]）; //console.log（第二个）;

    setInterval(function () {

        if (minute == 0 && second == 0) {
            alert("no time left");
        }
        else if (second !== 0) {
            second--;
        }
        else {
            minute--;
            second = 60;
        }

        $('#input').val(minute + ':' + second);
    }, 1000);
});`

Answer 2

我稍微修改了您的代码并创建了一个小提琴：JsFiddle

$("#submit").click(function(){
    var timeVal = $("#input").val();
    var mainTimeVal = timeVal.split(":");
    var minute = parseInt(mainTimeVal[0]);
    var second = parseInt(mainTimeVal[1]);

    setTimeout(function () {

        if (minute == 0 && second == 0) {
            alert("no time left");
        }
        else if (second !== 0) {
            second--;
        }
        else {
            minute--;
            second = 60;
        }
        second--;

        $('#input').val(minute + ':' + second);
    }, 1000);
});

Answer 3

必须递归拨打电话再打电话....

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>countdown</title>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

</head>
 <body>
   <input type="text" id="input" value="25:23"/><br>
   <input type="button" id="submit" value="send"></input>
    <script>
    $("#submit").click(function(){
        var timeVal = $("#input").val();
        var mainTimeVal = timeVal.split(":");
        var minute = parseInt(mainTimeVal[0]);
        var second = parseInt(mainTimeVal[1]);
        //console.log( second);

        setTimeout(function () {

            rece();
            function rece(){
            if (minute == 0 && second == 0) {
                alert("no time left");
                console.log('no time left')
            }
            else if (second !== 0) {
                second--;
                console.log('second');
                rece();
            }
            else {
                minute--;
                second = 60;
                console.log('minute');
                rece();
            }
            second--;
            }

        }, 100);
    });
  </script>
 </body>
</html>

使用JQuery的Javascript setTimeout函数

3 个答案: