-3

我需要一个 JS 每秒改变一个单词三次，我找到了很多关于它的信息，但我不知道如何使它可逆......基本上我需要这个框架设置 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动画中，问题是第一帧那个动画是无字的，其实从第2秒“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);
  }
}

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

4

2 回答 2

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
于 2014-12-07T13:15:04.743 回答
0 

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 方法。到目前为止一切顺利，但我们只会得到：

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

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

在条件运算符中：语句?do this if true :to this if false
我们可以使用计数器的交换0和1作为真/假 statements！

因此，在每odd(1) 上，我们使用交换后的数组“Name”，
在每even(0) 上，我们使用“and”字符串。而已。

于 2014-12-07T13:44:41.923 回答