Question

我需要一个JS每秒三次更改一个单词，我发现了很多关于它的信息，但是我无法找到如何让它变得可逆......基本上我需要这个框架设置1＆gt; 2＆gt; 3＆gt; ; 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;
  }
}

我现在唯一的问题是这个（也许我应该开始另一篇文章＆＃39;因为事情正在变得远远......）＆＃34; changeText＆＃34; div你看到它插入了CSS动画我接下来发布，问题是该动画的第一帧是无字的，实际上是从第二秒开始＃34; AND＆＃34; （第二个单词）出现，为什么有一个空白框架？

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);
  }
}

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

Answer 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

Answer 2

var num = document.getElementById("text"),
    arr = ["Tony", "Mark"],
    c = 0;

function loop(){
  num.innerHTML =  ++c%2 ? arr.reverse()[1] : "and";
}

setInterval(loop, 1000);

<p id="text"></p>

解释上述想法：

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

Tony＆gt;马克＆gt;托尼＆gt;马克＆gt;托尼＆gt;马克......

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

在条件运算符内：声明?如果为真:，则执行此操作，如果为false 我们可以使用计数器的交换0和1作为 truthy / falsy statements！

所以在每个odd（1）上我们使用交换数组“Name”，
在每个even（0）我们使用“和”字符串。就是这样。

JavaScript文本来回变换（例如：1,2,3,2,1,2,3,2,1,2,3 ......）

2 个答案: