-3

単語を毎秒 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」(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);
  }
}

助けてくれてありがとう、このようなことは初めてです。

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 メソッドを使用して反転する2 つの名前を配列に設定します。ここまでは順調ですが、次のような結果しか得られません。

トニー > マーク > トニー > マーク > トニー > マーク ...

しかし、カウンターを設定しcて無限にインクリメントすると、%2リマインダーを使用してこの値を取得できます1,0,1,0,1,0,...。

条件演算子の内部: ステートメント?do this if true :to this if false
カウンターのスワッピング0を使用してtrue/falsy1として使用できます。 statements

したがって、odd(1) ごとにスワップされた配列「Name」を使用し、(0)
ごとevenに「and」文字列を使用します。それでおしまい。

于 2014-12-07T13:44:41.923 に答える