Question

我尝试创建一个停止监视器，它将从输入框中取出分钟，然后我将其转换为秒。我一个接一个地递减秒数，我使用了“设置间隔”#t;这样做的方法。但它不会起作用。这就是我的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返回间隔的句柄，以便您可以使用clearInterval清除它。它不会从countDown函数返回秒数。我会将document.getElementById('time').innerHTML移动到countDown函数的底部并直接在秒上设置它。另外setInterval将函数作为第一个参数，所以最后不要包含()，这实际上是执行函数，即setInterval(countDown,2000)我也不会在里面声明函数onsubmit处理程序，没有必要，您可能会遇到范围问题。此外，countDown函数的开头总是在inputMin框中获取值，因此总是重置自己，说实话，您最好将其更改为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);
        }
    }  

}

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问题

2 个答案: