主页 / 问题 / 1429061
Accepted
Joni
Asked:2022-07-12 23:51:43 +0000 UTC2022-07-12 23:51:43 +0000 UTC

自动更改文本颜色的脚本

  • 772

朋友们。

有这样一个网站 https://neon-show.ru/

我有一个类似的块

我有一个类似的块，但我不知道如何询问或找到解决方案。请帮助我解决方案。

javascript css

2 个回答

  1. 您可以使用 CSS 动画：

    .hl {
  animation: switch 4s step-start infinite;
}

.hl:nth-child(2) { animation-delay: 1s; }
.hl:nth-child(3) { animation-delay: 2s; }
.hl:nth-child(4) { animation-delay: 3s; }

@keyframes switch {
  25% { color: red; }
}
    <span class="hl">First</span>
<span class="hl">Second</span>
<span class="hl">Third</span>
<span class="hl">Fourth</span>

    我还将在 JS 中给出我的版本：

    const spans = document.querySelectorAll('.hl');
let curIdx = 0;

setInterval(() => {
  spans[curIdx].classList.toggle('active');
  curIdx = ++curIdx % spans.length;
  spans[curIdx].classList.toggle('active');
}, 1000);
    .active {
  color: red;
}
    <span class="hl active">First</span>
<span class="hl">Second</span>
<span class="hl">Third</span>
<span class="hl">Fourth</span>

    • 1
  2. Best Answer

    我没有立即理解这个问题，他们写得有点混乱，这个解决方案适合你吗？：

    setInterval(() => {
  let active = document.querySelector('.active')
  let first = document.querySelector('span')
  if(!active) {
    first.classList.add('active')
  } else {
    if(document.querySelector('.active + span')) {
      active.nextElementSibling.classList.add('active')
      active.classList.remove('active')
    } else {
      active.classList.remove('active')
      first.classList.add('active')
    }
  }
}, 1e3)
    .active {
  color: purple;
}
    <span>Текст 1</span>
<span>Текст 2</span>
<span>Текст 3</span>
<span>Текст 4</span>

    将此代码粘贴到您的网站中：

    let spans = [...document.querySelectorAll('.elementor-widget-wrap.elementor-element-populated > .elementor-element.elementor-widget__width-initial.elementor-widget.elementor-widget-heading > div > span')],
  index = 0

setInterval(() => {
  let active, first = spans[0]
  spans.forEach((e, i) =>  {
    if(e.classList.contains('active')) {
      active = e
      index = i
    }
  })
  if(!active) {
    first.classList.add('active')
  } else {
    if(spans[index+1]) {
      spans[index+1].classList.add('active')
      active.classList.remove('active')
    } else {
      active.classList.remove('active')
      first.classList.add('active')
    }
  }
}, 1e3)

    不要忘记样式！

    .active {
  color: rgb(205, 0, 255);
}
    • 0

相关问题