主页 / 问题 / 1442087
Accepted
Pacemaker
Asked:2022-08-23 23:12:09 +0000 UTC2022-08-23 23:12:09 +0000 UTC

您需要一个接一个地运行一个 html 元素。广告旋转器的类型。类替换方法

  • 772

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

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

"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>

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

javascript dom

1 个回答

  1. Best Answer

    好吧，例如像这样：

    "use strict";

const getAllRotationsClasses = document.querySelectorAll(".rotation span");
let count = 1;

const rotation = function() {

  getAllRotationsClasses.forEach(function(elem, index) {
    elem.classList.toggle("rotator__span", count !== index);
  });

  count++;
  if (count >= getAllRotationsClasses.length) {
    count = 0;
  }
}

setInterval(rotation, 1000);
    .rotator__span {
  display: none;
}

.rotator__span__active {
  display: inline;
}
    <div>
  <p>
    Я
    <span class="rotation">
                <span class="">учу 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>

    • 0

相关问题