x 秒后自动更改文本中单词的字体颜色

Question

我需要以下方面的帮助 - 我的单词范围很广，即：学期一学期二学期三学期四我想用相同的颜色开始所有术语 - 然后，即 3 秒后，term1 应该变成绿色，然后再过 3 秒后，term2 应该变成绿色（但 term1 应该回到基本颜色） - 当你在term4 结束，动画应该从头开始（循环）。我一直在摆弄 CSS 动画，但结果不如预期 - 谁能帮忙？如果不能纯粹在 CSS 中完成，也许 Javascript?

感谢您的每一次输入！

Answer 1

现在我设置了1秒的超时

var terms = ["term1", "term2", "term3"];
var counter = 0;
setTimeout(function(){ highlight(terms[counter]); }, 1000);
function highlight(text) {
  counter++;
  if(counter == 3)
      counter = 0;
  var element = document.getElementById("data")
  var data =  new String(element.innerText);
  element.innerHTML = data.replaceAll(text, '<mark class=red>' + text + '</mark>');
  setTimeout(function(){ highlight(terms[counter]); }, 1000);
}

mark.red {
    color:#ff0000;
    background: none;
   }

<!doctype html>

<html>
  <head>
   
  </head>

  <body>
    <div id="data">
        Lorem Ipsum is simply term1 dummy text of term2 the printing and typesetting industry. Lorem Ipsum has been the term2 industry's term2 standard dummy text ever since the 1500s,  term1 when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, term3 but term1  also the leap into electronic typesetting, remaining term3essentially unchanged. term2 It was popularised in the 1960s with the release of term3 Letraset term1  sheets containing term3 Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
  </body>
</html>

Answer 2

试试这个

function changeColor() {
    const container = document.getElementById('container');
    const elems = container.querySelectorAll('span');
    const elemsCount = elems.length;
    let i = 0;
    let prevElem = elems[elemsCount - 1];
    setInterval(() => {
        const currElem = elems[i % elemsCount];
        currElem.style.color = 'rgb(0,255,0)';
        prevElem.style.color = 'rgb(0,0,0)';
        prevElem = currElem;
        i++;
    }, 3000); // change this value to speed up/slow down the cicle
}

changeColor();

<div id="container">
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
</div>

Answer 3

假设这是一个初级问题，我将使用jQuery。事实上，如果你愿意，你可以自由使用任何其他前端框架 HTML:

<div id="banner-message">
   <ul>
   <li>term 1</li>
      <li>term 2</li>
         <li>term 3</li>
            <li>term 4</li>
   </ul>
</div>

脚本：

jQuery(function() {
    var terms = jQuery("ul li");
  var i=0;
    setInterval(changeColor, 1000);
  function changeColor() {
    jQuery(terms[i]).siblings().removeClass('red');
    jQuery(terms[i]).addClass('red');
    i+=1;
    if (i==terms.length) i==0;
  }
})

CSS:

.red {
  color:red;
}

在此处观看直播：

x 秒后自动更改文本中单词的字体颜色

Auto change font color of words in a text after x seconds

javascript

css

animation

text

colors