JavaScript 文本随时间来回变化（例如：1,2,3,2,1,2,3,2,1,2,3...）答案

【问题标题】：JavaScript text changing over time back and forth (ex.:1,2,3,2,1,2,3,2,1,2,3...)JavaScript 文本随时间来回变化（例如：1,2,3,2,1,2,3,2,1,2,3...）
【发布时间】：2015-02-05 05:11:21
【问题描述】：

我需要一个 JS 每秒改变一个单词 3 次，我找到了很多关于它的信息，但我不知道如何使它可逆...基本上我需要这个框架设置 1>2>3>2 >1>2>3>2>1 以此类推。

编辑：也许我用数字说话不是很有用，我需要处理文字，这是我正在使用的一个例子......感谢@chip这个问题是没有了：

var text = ["MARK", "AND", "TONY", "AND"];
var counter = 0;
var elem = document.getElementById("changeText");
setInterval(change, 1000);

function change() {
  elem.innerHTML = text[counter];
  counter++;
  if (counter >= text.length) {
    counter = 0;
  }
}

我现在唯一的问题是这个（也许我应该开始另一个帖子，因为事情越来越远了......）你看到的“changeText”div被插入到我接下来要发布的CSS动画中，问题是那个动画的第一帧是无字的，其实从第二秒“AND”（第二个字）就出现了，为什么会有一个空白帧呢？

div {
  font-family: REVOLUTION;
  font-size: 150px;
  text-align: center;
  width: 200px;
  height: 200px;
  border-radius: 50% 50% 0 0;
  background: indianred;
  transform: rotate(90deg);
  -webkit-animation: square-to-circle 2s .5s infinite cubic-bezier(1, .015, .295, 1.225) alternate;
}
@-webkit-keyframes square-to-circle {
  0% {
    border-radius: 50% 50% 0 0;
    background: indianred;
    transform: rotate(90deg);
  }
  50% {
    border-radius: 50% 0 0 0;
    background: darksalmon;
    transform: rotate(45deg);
  }
  100% {
    border-radius: 0 0 0 0;
    background: coral;
    transform: rotate(0deg);
  }
}

感谢您的帮助，这是我第一次接触这些东西。

【问题讨论】：

给我看看你的代码
如果没有代码，我们大多数可以提供帮助的人都会对您正在尝试做的事情一无所知。
Here's a hacky solution
@chipChocolate.py 伙计，这很聪明，简单和聪明我需要那个代码来处理单词，我根据芯片改变了一些东西，现在我的问题是初始帧是空的......我的意思是，单词在一秒钟后开始出现，为什么？
Try this.......

标签： javascript animation text time letter

【解决方案1】：

您可以使用计数器和方向：

var counter = 1;
var direction = 1;

setInterval(function() {
    counter += direction;
    if (counter < 1 || counter > 3) {
        // Whoops, we passed the limit: bounce back.
        direction = -direction;
        counter += 2*direction;
    }
    document.getElementById("mydiv").textContent = "counter is " + counter;
}, 333); // 333ms = 3 times per second

【讨论】：

【解决方案2】：

var num = document.getElementById("text"),
    arr = ["Tony", "Mark"],
    c = 0;

function loop(){
  num.innerHTML =  ++c%2 ? arr.reverse()[1] : "and";
}

setInterval(loop, 1000);

&lt;p id="text"&gt;&lt;/p&gt;

解释上面的想法：

将两个名称["Tony" ,"Mark"] 设置为一个数组要翻转它们，我们可以使用 Array.prototype.reverse 方法。到目前为止一切都很好，但我们只能得到：

托尼 > 马克 > 托尼 > 马克 > 托尼 > 马克 ...

但是如果我们设置一个计数器c 并无限增加它，使用%2 提醒我们可以得到这个值1,0,1,0,1,0,... 好的呢？

在条件运算符中：语句 ? 如果为真则执行此操作 : 如果为假则执行此操作
我们可以使用计数器的交换 0 和 1 作为 truthy/falsy statements!

因此，在每个odd (1) 上，我们使用交换后的数组“名称”，
在每个even (0) 上，我们使用“and”字符串。就是这样。

【讨论】：