Question

你好我试着制作一个简单的应用程序，每1秒将数字从输入倒数到0。有人可以解释一下我的代码是做错了吗？我尝试了setTimeOut和countDown函数的不同组合，但在最佳设置中，我的应用只能将输入（#number）中的数字显示为0一会儿。我不知道为什么每次点击后都会清除控制台，启动＆＃34;。

<body>


    <form>
        <h1>Countdown:</h1>
        <h3>Set time</h3>
        <input id="number" type="text">
        <button id="start">Start</button>
    </form>
    <div id="area"><p id="text1"></p></div>
<script>
        window.onload = init;
        function init(){
            var start = document.getElementById("start");
            start.onclick = finalCountDown;
        }

         function finalCountDown() {setTimeout(countDown,1000);}
        function countDown(){
            console.log("works");
            var number = document.getElementById("number");
            var value = number.value;
            var area = document.getElementById("text1");
            for (var i = value; i>0;i--){
            area.innerHTML+=i;
            }
        }

    </script>
</body>

Answer 1

这里几乎没有问题;

在您的按钮上，您需要设置属性类型=＆＃34;按钮＆＃34;或者它会尝试提交您的表格。
在你的setTimeout中，你引用countDown函数，但从不调用它。你需要写setTimeout(countDown(), 1000);。

＆＃13;

window.onload = init;
function init(){
    var start = document.getElementById("start");
    start.onclick = finalCountDown;
}

 function finalCountDown() {setTimeout(countDown(),1000);}
function countDown(){
    console.log("works");
    var number = document.getElementById("number");
    var value = number.value;
    var area = document.getElementById("text1");
    for (var i = value; i>0;i--){
    area.innerHTML+=i;
    }
}

＆＃13;

<form>
    <h1>Countdown:</h1>
    <h3>Set time</h3>
    <input id="number" type="text">
    <button type="button" id="start">Start</button>
</form>
<div id="area"><p id="text1"></p></div>

＆＃13;

执行此操作将从代码中删除错误。现在你只需要改变一些东西来获得所需的结果如下：

＆＃13;

window.onload = init;
function init(){
    var start = document.getElementById("start");
    start.onclick = finalCountDown;
}

function finalCountDown() {setTimeout(countDown(),1000);}

function countDown(){
    console.log("works");
    var number = document.getElementById("number");
    var value = parseInt(number.value, 10);
    var area = document.getElementById("text1");
    var interval = setInterval(function() {
        if (value > -1) {
            area.innerText = value;
            value--;
        } else {
            clearInterval(interval);
        }
    }, 1000);
}

＆＃13;

<form>
    <h1>Countdown:</h1>
    <h3>Set time</h3>
    <input id="number" type="text">
    <button type="button" id="start">Start</button>
</form>
<div id="area"><p id="text1"></p></div>

＆＃13;

我不确定你是否对开始倒计时之前由setTimeout引起的1秒延迟感兴趣，或者这只是一个错误。我假设后者，如果是这样，只需删除该函数及其调用。用countDown替换它。

在回复您的评论时，您可以将<p>替换为.innerText，而不是使用<p>元素并更新其<ul>。我为<ul>提供了更多内容<id>属性，并将var area = ...替换为引用新<ul>的变量。接下来，您应该将area.innerText...替换为：

var li = document.createElement("LI");
li.innerText = i;
ul.appendChild(li);

完整图片摘录：

＆＃13;

window.onload = init;
function init(){
    var start = document.getElementById("start");
    start.onclick = finalCountDown;
}

function finalCountDown() {setTimeout(countDown(),1000);}

function countDown(){
    var value = parseInt(document.getElementById("number").value, 10);
    var ul = document.getElementById("ul");
    var interval = setInterval(function() {
        if (value > -1) {
            var li = document.createElement("LI");
            li.innerText = value;
            ul.appendChild(li);
            value--;
        } else {
            clearInterval(interval);
        }
    }, 1000);
}

＆＃13;

<form>
    <h1>Countdown:</h1>
    <h3>Set time</h3>
    <input id="number" type="text">
    <button type="button" id="start">Start</button>
</form>
<ul id="ul"></ul>

＆＃13;

用户输入的Javascript倒计时

1 个答案: