JavaScript在while循环中设置输入值

代码如下：

v1 = document.getElementById('double').value;
while (v1 < 10) {
    v1++;               
    now = new Date().getTime();
    while(new Date().getTime() < now + 1000){}
    document.getElementById('inputArea').value = v1;
}

inputArea是一个有一个数字的文本框，我想把这个数字增加一秒，直到它达到10。 问题是输入区域只显示最后一个值10，它应该是…7，8，9 10。

您必须使用函数。尝试以1秒为增量递归调用它

更新：

可能更好，因为这样您就不需要处理递归调用。请尝试以下类似代码：

v1 = document.getElementById('double').value;
var intervalId = setInterval(function() { 
  v1++;
  document.getElementById('inputArea').value = v1;
  if(v1 === 10) clearInterval(intervalId);
}, 1000);

你可以使用它

var timerId=setIntervalfunction{ v1=parseIntdocument.getElementById'double'。值为10； ifv1==10{ clearIntervaltimerId } 否则{ document.getElementById'double'。值=v1+1 } },1000;

---

使用setTimeout可以非常轻松地完成：

---

首先，您需要在while循环中移动值update：

v1 = document.getElementById('double').value;
while (v1 < 10) {
    v1++;               
    now = new Date().getTime();
    while(new Date().getTime() < now + 1000) {
        document.getElementById('inputArea').value = v1;
    }
}

在回答您评论中的问题时，除了上面提到的以外，while循环中它似乎不起作用的原因是循环不断地应用值update，而没有给浏览器窗口更新的机会。使用setInterval可以避免这种情况

不管怎样，如果您想看到上面的工作，您可以暂停while循环的执行，并发出类似警报的消息-这应该给窗口一个更新的机会

---

这是一个。

所以，您需要的是setInterval，而不是while。您还需要parseInt。while循环是阻塞操作。感谢所有的答案，我知道setInterval是有效的，但我困惑的是为什么它在while循环中不起作用？为什么它会阻止操作？在这种情况下，setInterval可能更可取。您可以利用局部变量，而不是每次从DOM读取值。单向=>设置为DOM，不读取它。因为，DOM操作成本很高。@Tushar您可以这样做，我原则上同意。除了a这看起来像是一个相当缺乏经验的javascripter，我想让它保持超级简单，b我不认为读取一个字段的值10次会破坏任何性能指标；

v1 = document.getElementById('double').value;
while (v1 < 10) {
    v1++;               
    now = new Date().getTime();
    while(new Date().getTime() < now + 1000) {
        document.getElementById('inputArea').value = v1;
    }
}