JavaScript setInterval issue

本文关键字：issue setInterval JavaScript 更新时间：2023-09-26

我正在尝试创建一个秒表，它将从输入框中获取分钟，然后将其转换为秒。我逐个递减秒数，我正在使用"设置间隔"方法来做到这一点。但它行不通。这是我的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>

有人可以给我一个如何解决这个问题的想法吗？

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

所以像下面这样的事情应该可以解决问题

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);
        }
    }  
}

我想出了如何解决它....使用此 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>