如何制作类似于谷歌数字生成器的数字生成器

12 浏览
0 Comments

如何制作类似于谷歌数字生成器的数字生成器

我正在尝试在网页上创建一种数字生成器。我想在生成的数字显示之前显示五个数字。为了更好地想象，你可以看一下谷歌生成器。当你点击生成时，它会显示3-4个数字在生成的数字之前。我使用了setInterval或setTimeout，但我不知道它们是如何工作的。我的JS代码如下：

var button = document.querySelector("button");
button.addEventListener("click",function() {
    for (var i = 0; i < 8; i++) {
        setInterval(textC,5);
    }
});
function textC(){
    number.textContent = Math.floor(Math.random() * 1000) + 1;
}

感谢所有的帮助！

0

2 答案

0 Comments

问题的出现原因：

在生成类似于谷歌数字生成器的数字生成器时，不应该使用循环。循环在JavaScript中是同步执行的，会阻塞浏览器的渲染，导致用户界面无响应。

解决方法：

使用嵌套的setTimeout方法来代替循环。通过设置预定义的阈值，调用setTimeout方法，直到达到阈值为止。这样可以最大程度地控制代码的执行，避免阻塞浏览器的渲染。

以下是生成数字生成器的示例代码：

var button = document.querySelector("button");
var number = document.querySelector("#number");
const nRuns = 12;
const timeout = 100;
let iterator = 0;
button.addEventListener("click", textC);
function textC() {
    number.textContent = `${Math.floor(Math.random() * 1000) + 1}\n`;
    iterator += 1;
    if (iterator < nRuns) {
        setTimeout(textC, timeout)
    } else {
        iterator = 0;
        // you control the loop, so it's time for some extra text after it
        number.textContent += ` ... and that concludes this series of random numbers`;
    }
}

以下是HTML部分的代码：

以上代码使用嵌套的setTimeout方法实现了一个数字生成器，每隔一段时间生成一个随机数，直到达到预定义的次数为止。通过这种方式，能够控制代码的执行，避免阻塞浏览器的渲染，从而实现类似于谷歌数字生成器的效果。

0
0 Comments

问题的出现原因：使用setInterval()会无限循环生成随机数，需要手动清除才能停止。而我们需要的是每隔一段时间生成一个随机数。

解决方法：改用setTimeout()，并根据循环中的i值来设置超时时间。这样每个间隔都会在前一个间隔的基础上增加50毫秒。

以下是示例代码：

const button = document.querySelector("button");
const number = document.querySelector("#number");
button.addEventListener("click", function() {
  for (let i = 0; i < 5; i++) {
    setTimeout(textC, 50 * i);
  }
});
function textC() {
  number.textContent = Math.floor(Math.random() * 1000) + 1;
}

以下是示例HTML代码：

0