Текст JavaScript меняется с течением времени взад и вперед (напр.:1,2,2,2,1,2,3,2,1,2,3...)

Question

Мне нужно, чтобы 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;
  }
}

Моя единственная проблема сейчас заключается в следующем (может быть, я должен начать еще один пост, потому что вещи идут издалека...) div "changeText", который вы видите там, он вставлен в анимацию CSS, которую я опубликую ниже, проблема в том, что первый кадр этой анимации нет слов, фактически из 2-й секунды появляется "И" (второе слово), почему пустая рамка?

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. Пока все хорошо, но мы получим только:

Тони> Марк> Тони> Марк> Тони> Марк...

но если мы установим счетчик c и увеличивать его бесконечно, используя %2 напоминание, что мы можем получить эти значения 1,0,1,0,1,0,... ОК, что на счет этого?

Внутри условного оператора: оператор ? сделай это если правда : на это, если ложь
мы можем использовать обмен счетчика 0 а также 1 как правда / ложь statements!

Так на каждом odd (1) мы используем поменяемый массив "Имя",
и на каждом even (0) мы используем строку "и". Вот и все.