Question

我是html＆amp;的新手。 JavaScript的。我想实现一个可以生成随机数的应用程序，并逐个显示在浏览器中。但是，它只显示一次。

代码如下：

<!doctype html>
<html>

<head>
    <script type="text/javascript">
        var flag = true;
        var timeout = 1;
        function generateRandom(){
            var i = 0;
            while(i < 10){
                document.getElementById("number").innerHTML = Math.ceil(300 * Math.random());
                i++;
            }

        }
    </script>

    <style> 

    </style>
    <meta charset = "utf-8"/>
    <title>Happy New Year</title>
    <h1>Happy New Year</h1>
    <hr />
</head>

<body>
    <div>
        <button type="button" onclick="generateRandom()">start</button>
    </div>

    <p id = "number">
        Some Text here!
    </p>
</body>
</html>

提前感谢您的帮助。

Answer 1

浏览器仅在不显示其他内容时重新绘制显示内容。你的while循环没有给它任何空余时间，因此它不会重新绘制，直到循环结束并且函数完成。

即使情况并非如此，数到10也不会花费很长时间，而且人眼会注意到它会更快地改变数字。

如果您希望有可见的更新，则需要：

总共留出足够的时间让用户注意到更改
留出足够的时间不运行JS以使浏览器执行重绘事件

为此，您通常会使用间隔计时器。

＆＃13;

var flag = true;
var timeout = 1;

function generateRandom() {
  var i = 0,
    interval;


  function update() {
    var number;
    number = Math.ceil(300 * Math.random());
    document.getElementById("number").innerHTML = number;
    i++;
    if (i == 10) {
      clearInterval(interval);
    }
  }

  interval = setInterval(update, 500);

}

document.querySelector('button').addEventListener('click', generateRandom);

＆＃13;

<div>
  <button type="button">start</button>
</div>

<p id="number">
  Some Text here!
</p>

＆＃13;

Answer 2

while循环是同步的。他们在运行时不会更新DOM。在循环执行

之前，不会更改任何内容

这表明没有任何事情发生过。你应该研究一些异步的东西，比如间隔/定时器。

为什么浏览器中的号码没有更新？

2 个答案: