JavaScript setInterval 问题

Question

我正在尝试创建一个秒表，它将从输入框中获取分钟数，然后将其转换为秒数。我将秒数一一递减，我正在使用 'set Interval' 方法来做到这一点。但它不会工作。这是我的 JavaScript 文件的样子：

window.onload = function(){
    //creating the inputminutes text Box
    var inputMin = document.createElement("input");
    inputMin.setAttribute('id','inputMin');
    inputMin.setAttribute('type','text');
    //creating the submit button
    var btn = document.createElement('input');
    btn.setAttribute('type','submit');
    btn.setAttribute('id','submit');
    btn.setAttribute('value','Start');

    document.getElementById('form').appendChild(inputMin);
    document.getElementById('form').appendChild(btn);


    document.getElementById('form').onsubmit = function() {     
        function countDown(){
            var minutes = document.getElementById('inputMin').value;
            if(isNaN(minutes)) {
                alert("Please Enter a number...");
                return;
            }
            var seconds = parseFloat(minutes * 60);
            seconds--;
            return seconds;
        }
        var tick = setInterval(countDown(),2000);

        document.getElementById('time').innerHTML = tick.toString();
    }   
}

这就是我的 html 的样子：

<html>
<head>
<title></title>
    <style>
        body{
            margin:auto;
            width:500px;
        }
        h2{
            font-size: 40px;
            font-family: Arial;
        }
    </style>
    <script type="text/javascript" src="js/app.js"></script>
</head>
<body>
    <form id="form"></form>
    <h2 id="time">0.00</h2>
</body>

</html>

有人可以告诉我如何解决这个问题吗？

Answer 1

您没有正确使用 setInterval。 setInterval returns 间隔句柄，以便您可以使用 clearInterval 清除它。它不从 countDown 函数返回秒数。我会将 document.getElementById('time').innerHTML 移动到 countDown 函数的底部，并将其直接设置为秒数。另外 setInterval 将一个函数作为第一个参数，所以不要在最后包含 () ，这实际上是在执行函数，即 setInterval(countDown,2000) 我也不会在里面声明函数onsubmit 处理程序，没有必要，您可能会遇到范围问题。此外，countDown 函数的开始总是在 inputMin 框中获取值，因此总是重置自身，老实说，您最好将其更改为 setTimeout 并递归调用自身.此外，您还需要从 posting 中停止表单，这将立即刷新页面（并且似乎什么都不做）。我可能不会使用表单，因为您并不是真的希望它 post（提交），也许只是将点击处理程序连接到按钮。

所以像下面这样的东西应该可以解决问题

window.onload = function () {
    //creating the inputminutes text Box
    var inputMin = document.createElement("input");
    inputMin.setAttribute('id', 'inputMin');
    inputMin.setAttribute('type', 'text');
    //creating the submit button
    var btn = document.createElement('input');
    btn.setAttribute('type', 'submit');
    btn.setAttribute('id', 'submit');
    btn.setAttribute('value', 'Start');

    document.getElementById('form').appendChild(inputMin);
    document.getElementById('form').appendChild(btn);


    document.getElementById('form').onsubmit = function (e) {
        //Start the countDown with the value from the box, as seconds
        setTimeout(function(){countDown(document.getElementById('inputMin').value * 60)}, 2000);
        return false; //Need to also stop the post of the form

    }
}
function countDown(seconds) {    
    if (isNaN(seconds)) {
        alert("Please Enter a number...");        
    }
    else
    {
        seconds--;
        document.getElementById('time').innerHTML = seconds;
        if (seconds > 0) {
            setTimeout(function () { countDown(seconds); }, 2000);
        }
    }  

}

Answer 2

我知道如何解决它....使用这个 java 脚本解决方案....

<div id="time">ddd</div>
<script> 
 var seconds=0
 var minutes=1 
 time.innerHTML = "My new text!";
function display(){ 
 if (seconds<=0){ 
    seconds=59 
    minutes-=1 
 } 
 if (minutes<=-1){ 
    seconds=0 
    minutes+=1 
 } 
 else 
    seconds-=1 
    time.innerHTML = minutes+"."+seconds ;
    setTimeout("display()",1000) 
} 
display() 

</script>

JavaScript setInterval 问题

JavaScript setInterval issue

javascript

arrays

performance

jquery

dom-events