Каждый раз, когда моя страница обновляется, цвета каждой буквы рандомизируются. Как я могу получить так, что есть два цвета, и просто чередую их.

Вот цвета 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>
2
johnstont05 28 Авг 2017 в 23:12

4 ответа

Лучший ответ

Вы не хотите рандомизировать для каждой буквы, просто при загрузке, попробуйте это:

// Menu Visual
var myText = document.getElementById('myText');
var rnd = Math.random() > 0.5 ? 1 : 0; // set once, if you always want it to start with the same color, then just set this to 0 or 1;
var tempText = "";

for(let x = 0, length = myText.textContent.length; x < length; x ++){
  var rndBounce =  Math.floor(Math.random() * (11 - 5) + 5) / 10;

  if(x % 2 === rnd) { // based on if rnd is 0 or 1
      tempText += "<span style='color: #011a39; animation-duration: " + rndBounce + "s'>" + myText.textContent[x] + "</span>";
  } else {
      tempText += "<span style='color: #29c3fd; 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>
1
Joe Lissner 28 Авг 2017 в 20:24

Используя sessionStorage или cookie, когда вы впервые загружаете страницу, вы выбираете случайный цвет для каждой буквы, а затем, когда вы обновляете, вы должны только чередовать их .

Поэтому полезно использовать sessionStorage для хранения первого числа, полученного вами в прошлый раз, получить новое случайное число, только если sessionStorage для этой буквы не может быть найдено.

Попробуйте сами здесь (обновить до чередования)

https://jsfiddle.net/dalinhuang/db54ttuq/

// 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 (sessionStorage.getItem('item' + x)) {
    rnd = sessionStorage.getItem('item' + x) === '1' ? 0 : 1;
  }
  sessionStorage.setItem('item' + x, rnd);

  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;
1
Dalin Huang 28 Авг 2017 в 20:48

Во-первых, вы рандомизируете цвета в этой строке:

var rnd = Math.floor (Math.random () * (2 - 0 + 1));

Если вы хотите чередовать, просто сделайте что-то вроде этого:

int i = 0;
for(let x in myText.textContent){
  var rnd =  i % 2;
  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>";
  }
  i += 1;
}
1
Trincity 28 Авг 2017 в 20:22

Я думаю, что это будет работать для вас. Если вам нужны другие цвета, просто измените их внутри массива 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>
4
Artur Trapp 28 Авг 2017 в 20:48