Pacemaker's questions

作为 JS 研究的一部分，我决定创建 3 个 div 并制作它，以便当您将鼠标悬停在它们上时，背景颜色会随机改变颜色。以这种方式实现了一切：

(function getColor() {
  const colors = ["red", "green", "blue", "black", "magenta", "pink"];

  function getRandomIntInclusive(min, max) {
    min = Math.ceil(0);
    max = Math.floor(6);
    let output = Math.floor(Math.random() * (max - min + 1)) + min; 
    return output;
  }

  function randomColor(someRndNumber, colorArray) {
    let colorResult = colorArray[someRndNumber];
    return colorResult;
  }
  let rndResult = getRandomIntInclusive();
  let rndColor = randomColor(rndResult, colors);

  const getColoredDivs = document.querySelectorAll(".coloredDiv");
  getColoredDivs.forEach((elem) => {
    elem.addEventListener("mouseover", () => {
      elem.style.backgroundColor = rndColor;
      getColor();
    });
  });

  getColoredDivs.forEach((elem) => {
    elem.addEventListener("mouseout", () => {
      elem.style.backgroundColor = "white";
    });
  });
})();

前 10-12 次迭代一切都按我的意愿进行。当您将鼠标悬停在 div 上时，背面的颜色会随机变化（在屏幕上显示为三个带有黑色边框的正方形），但随后会开始某种无休止的激烈数字随机化（我通过在 randomizer 函数中添加 console.log 进行检查） . 浏览器冻结。杀死进程的唯一方法是通过任务管理器。我认为问题在于，每次我将光标移到 div 的表面上时，都会发生从 0 到 6 的值的随机化。但我不知道如何防止这种情况

根据任务的条件，有这样一段代码：

有必要通过添加和删除类来创建内容旋转的效果。

"use strict";

const getAllRotationsClasses = document.querySelectorAll(".rotator__span");

const rotation = function() {
  getAllRotationsClasses.forEach(function(elem) {
    if (elem.classList.contains("rotator__span")) {
      elem.classList.toggle("rotator__span__active");
    }
  });
}

setInterval(rotation, 1000)

.rotator__span {
  display: none;
}

.rotator__span__active {
  display: inline;
}

<div>
  <p>
    Я
    <span class="rotation">
                <span class="rotator_span rotator__span_active">учу JS</span>
    <span class="rotator__span">краб</span>
    <span class="rotator__span">покорю этот мир</span>
    <span class="rotator__span">не сдамся</span>
    <span class="rotator__span">упрямый</span>
    <span class="rotator__span">добьюсь своей цели</span>
    </span>
  </p>
</div>

这段代码选择了所有未激活的，将它们显示在屏幕上一行并删除它们，但我需要一个接一个。如何实施？请解释螃蟹））

页面上显示了某个段落。我这样做是为了让它的内容在点击时发生变化。以及如何在第二次点击时返回元素的默认状态？好吧，就像有一个隐藏内容的块一样。例如：扰流板。用户可以滚动。或点击打开。并在第二次单击以再次关闭。

firstParagraph.addEventListener('click', function () {
    firstParagraph.innerHTML = 'Это первый абзац!';
    firstParagraph.style.textAlign = 'center';
})