使用脚本或 CSS 动画替换/旋转句子中的多个单词答案

【问题标题】：Replace/rotate multiple words in a sentence using scripts or CSS animation使用脚本或 CSS 动画替换/旋转句子中的多个单词
【发布时间】：2020-08-04 21:33:38
【问题描述】：

我正在尝试在我的网站 (Wordpress) 的段落中替换/旋转几个不同的单词。我找到了一个脚本，可以让我更改一组单词，但不知道如何更改下一组。

var words = ["one", "two", "three"];
var i = 0;
var text = "one";

function _getChangedText() {
i = (i + 1) % words.length;
console.log(words[i]);
console.log(i);
return text.replace(/one/, words[i]);
}

function _changeText() {
var txt = _getChangedText();
console.log(txt);
document.getElementById("changer").innerHTML = txt;
}
setInterval("_changeText()", 3000);

&lt;h4&gt;Count to &lt;span id="changer"&gt;one&lt;/span&gt; and (four, five, six) and (seven, eight, nine).&lt;/h4&gt;

【问题讨论】：

逻辑会比现在的代码复杂。您将需要一个二维单词数组和多个在行中具有 id 的转换器元素。你需要两个循环：第一个循环遍历元素，第二个循环遍历二维数组的单词并继续..

标签： javascript css animate.css

【解决方案1】：

这可能是你想要的。如果您了解它的工作原理，您可以轻松地扩展此代码。我加了cmets，方便大家理解。

; // This is a javascript object used as a hashmap
var changeList = {
  "one": "two",
  "two": "three",
  "three": "four",
  "four": "five",
  "five": "six",
  "six": "seven",
  "seven": "eight",
  "eight": "nine",
  // ...
}

function _changeText() {
  let els = document.querySelectorAll('.word-changer');
  //iterate over all .word-changer elements
  for (let i = 0; i < els.length; i++) {
    let el = els[i];
    // read out elements data-counter and data-max attributes
    let counter = parseInt(el.dataset.counter);
    let max =  parseInt(el.dataset.max);
    
    if(counter < max ) {
      // Update counter and replace word based on the "hashmap"
        counter++;
      el.innerHTML = changeList[el.textContent]; // This is where the words get swapped
      el.dataset.counter = counter;
    }
  }
}

setInterval(_changeText, 3000);

<h4>
Count to <span class="word-changer" data-counter="0" data-max="2">one</span> and <span class="word-changer" data-counter="0" data-max="2">four</span> and <span class="word-changer" data-counter="0" data-max="2">six</span>.
</h4>

【讨论】：

【解决方案2】：

不清楚你到底在找什么。

var words = ["one", "two", "three"];
var i = 0;
var cnt =0;
var text = "one";

function _getChangedText() {
i = (i + 1) % words.length;
return  words[i];
}

function _changeText() {
var txt = _getChangedText();
//console.log(document.getElementsByClassName("changer")[cnt]);
document.getElementsByClassName("changer")[cnt].innerHTML = txt;
cnt++ ;
cnt=cnt % 2;
}

for(let i=0;i<2;i++){

setInterval("_changeText()", 3000);

}

<h4>Count to <span class="changer">one</span> and (four, five, six) and (seven, eight, nine).</h4>

<h4>Count to <span class="changer">one</span> and (four, five, six) and (seven, eight, nine).</h4>

【讨论】：

我希望替换三组单词（一、二、三）、（四、五、六）和（七、八、九），以便它们在句子中连续循环.

【解决方案3】：

我创建了一个名为 cycleable 的库，用于处理内联文本循环。它可用于实现您的目标，并且可以通过标记完全配置。

这就是您的标记的样子

<link rel="stylesheet" href="/path/to/cycleable.css">

<h4 style="margin: 2rem;">
    Count to
    <span
        class="cycleable"
        js-items="one,two,three"
        js-timeout="3000"
    ></span>
    and
    <span
        class="cycleable"
        js-items="three,four,five"
        js-timeout="3000"
    ></span>
    and
    <span
        class="cycleable"
        js-items="five,six,seven"
        js-timeout="3000"
    ></span>.
</h4>

<script src="/path/to/cycleable.js"></script>
<script>
    _Cycleable_();
</script>

这就是结果

【讨论】：