javascript - 每次刷新我的页面时，每个字母的颜色都是随机的

Question

每次刷新我的页面时，每个字母的颜色都是随机的。我怎样才能得到它以便有两种颜色，并且只是交替使用它们。

这是 HTML 颜色:

011a39 29c3fd

// Menu Visual
var myText = document.getElementById('myText');
var tempText = "";

for(let x in myText.textContent){
  var rnd =  Math.floor(Math.random() * (2 - 0 +  1));
  var rndBounce =  Math.floor(Math.random() * (11 - 5) + 5) / 10;
  if(rnd === 0){
    tempText += "<span style='color: #011a39; animation-duration: " + rndBounce + "s'>" + myText.textContent[x] + "</span>";
  } else if (rnd === 1) {
    tempText += "<span style='color: #29c3fd; animation-duration: " + rndBounce + "s'>" + myText.textContent[x] + "</span>";
  } else {
    tempText += "<span style='color: #011a39; animation-duration: " + rndBounce + "s'>" + myText.textContent[x] + "</span>";
  }
}
myText.innerHTML = tempText;

@keyframes bounce {
  from { top: 10px; }
  to { top: 0; }
}

#textContainer {
  position: absolute;
top: 100px;
    left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}

#myText {
  text-align: center;
}

#myText>span {
  position: relative;
  font-size: 5em;
  font-family: 'Baloo Bhaijaan', cursive; 
  animation-name: bounce;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

<div id="textContainer">
  <div id="myText">Hello</div>
</div>

Answer 1

我认为这对您有用。如果你想要其他颜色，只需在 colors 数组中更改它们

// Menu Visual
var myText = document.getElementById('myText');
var tempText = "";
var colors = ["#011a39", "#29c3fd"];
for(let x in myText.textContent){
var rndBounce =  Math.floor(Math.random() * (11 - 5) + 5) / 10;
    //you can use the modulus operator (%) to guarantee that the counter variable keeps alternating between 1 and 0 (the colors array length)
    tempText += "<span style='color: " + colors[x % 2] +"; animation-duration: " + rndBounce + "s'>" + myText.textContent[x] + "</span>";
}
myText.innerHTML = tempText;

@keyframes bounce {
  from { top: 10px; }
  to { top: 0; }
}

#textContainer {
  position: absolute;
top: 100px;
    left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}

#myText {
  text-align: center;
}

#myText>span {
  position: relative;
  font-size: 5em;
  font-family: 'Baloo Bhaijaan', cursive; 
  animation-name: bounce;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

<div id="textContainer">
  <div id="myText">Hello</div>
</div>