Question

  <input type="number" id="number">
  <button onlcick="countdown()">COUNTDOWN</button>

  var t = document.getElementById('number').value;
function countdown() {
    setTimeout(function(){alert("hi!");}, t);
}
</script>

我希望setTimeout获得变量t。变量t将获得input标记中的任何4位数字。按下按钮时，它将开始减去。但是，当我尝试按下按钮时，它不会这样做。代码有问题吗？或者，这不是你怎么做的？

Answer 1

您有2个错误，首先将onlcick更改为onclick，然后将t变量添加到函数countdown，因为您需要在点击后获取值，但在您的示例变量中将是空的

function countdown() {
    var t = document.getElementById('number').value;
    setTimeout(function(){alert("hi!");}, t);
}

Example

此外，您可以清除超时，以便在点击后启动新计时器，如此

var timer;
function countdown() {
    var t = document.getElementById('number').value;
    clearTimeout(timer);
    timer = setTimeout(function(){alert("hi!");}, t);
}

Example

Answer 2

主要问题：您需要在函数内部读取输入值：

function countdown() {
    var t = document.getElementById('number').value;
    setTimeout(function(){alert("hi!");}, t);
}

变量t在页面加载时初始化，并且在输入值更改时不会自动更新。您有责任从输入中读取新值。

另一件事（可能只是一个错字）但是，属性应该是onclick。

Answer 3

按钮显示您的按钮应为<button onclick="countdown()">COUNTDOWN</button>

Answer 4

定义超时指针

window.hTimeOut = null;
function countdown() {

重置之前调用但未完成的倒计时（超时）

    if(window.hTimeOut!=null) clearTimeout(window.hTimeOut);

创建新超时

    window.hTimeOut = setTimeout(function(){
            alert("hi!");

完成后重置超时指针

            window.hTimeOut!=null;

并将新的时间值传递给它

    }, document.getElementById('number').value);
}

如何让setTimeout从INPUT中读取值？

4 个答案: