-2

你好，所以我做了在线课程，老师试图教我们一个像这样的气泡动画：https ://drinkcann.com/但更简单的是他只想让气泡动画但由于某种原因我的代码没有工作：

var numberOfbubbles = 10
for (let i = 0; i < numberOfbubbles; i++) {
newBubble()
    }
function newBubble() {
let bubble= document.createElement("div");
                                  bubble.classList.add("bubble");
                                  let x = randomNumber(100);
                                  let delay= randomNumber(3000)
                                  bubble.style.left = x + "vw";
                                  bubble.style.animationDelay = delay + "ms";
                                  document.querySelector("body").appendChild(bubble);
                                  }
                                  function randomNumber() {
                                  return Math.floor(Math.random() * max)
                                  }
                                  ```
the html code has an html:5 standard and just a div so can you tell me where is the problem in my code?,let me know if you want to post something else too
css code: https://codeshare.io/5Nn8PJ
4

1 回答 1

-1

您有多个问题：

1-您的代码没有正确缩进，我导致错误，这是一个更易读的代码：

var numberOfbubbles = 10
for (let i = 0; i < numberOfbubbles; i++) {
    newBubble()
}

function newBubble() {
    let bubble= document.createElement("div");
    bubble.classList.add("bubble");

    let x = randomNumber(100);
    let delay= randomNumber(3000)

    bubble.style.left = x + "vw";
    bubble.style.animationDelay = delay + "ms";

    document.querySelector("body").appendChild(bubble);
}

function randomNumber(max) {
    return Math.floor(Math.random() * max)
}

2- 在您的 randomNumber() 函数中，您没有指定 max 参数

3-您是否在页面加载后加载了脚本。您可以添加defer到您的脚本声明中，例如

<script defer src="script.js" charset="utf-8"></script>

它使脚本在加载完其他所有内容之后加载和执行没有你尝试在可以访问之前到达正文

document.querySelector("body")

4-当您发布问题时，请确保帮助我们了解您所做的事情，例如，您使用 JS，因此请向我们展示您在控制台中遇到的错误

于 2021-01-16T11:01:10.960 回答