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

时间：2017-08-28 20:12:16

标签： javascript html css

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

以下是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>

4 个答案:

答案 0 :(得分：4)

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

中更改它们

＆＃13;
＆＃13; 
// 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;
＆＃13; 
@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;
}
＆＃13; 
<div id="textContainer">
  <div id="myText">Hello</div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

首先，你要随机化这一行中的颜色：

  

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;
}

答案 2 :(得分：1)

你不想为每个字母随机化，只是在加载时，试试这个：

Traceback (most recent call last):
  File "C:/Users/Documents/landlordlady/python codes/test.py", line 8, in <module>
    QPVData = sp.sql_reader(os.path.join(qry_path, '8-28 qpv test.sql'), server_name=server, database=db)
  File "C:\Users\Documents\landlordlady\python codes\sql_processor.py", line 30, in sql_reader
    data = pd.read_sql(qry,server)
  File "C:\Users\AppData\Local\Programs\Python\Python36-32\lib\site-packages\pandas\io\sql.py", line 399, in read_sql
    chunksize=chunksize)
  File "C:\Users\AppData\Local\Programs\Python\Python36-32\lib\site-packages\pandas\io\sql.py", line 1436, in read_query
    cursor = self.execute(*args)
  File "C:\Users\AppData\Local\Programs\Python\Python36-32\lib\site-packages\pandas\io\sql.py", line 1413, in execute
    raise_with_traceback(ex)
  File "C:\Users\AppData\Local\Programs\Python\Python36-32\lib\site-packages\pandas\compat\__init__.py", line 340, in raise_with_traceback
    raise exc.with_traceback(traceback)
  File "C:\Users\AppData\Local\Programs\Python\Python36-32\lib\site-packages\pandas\io\sql.py", line 1401, in execute
    cur.execute(*args)
pandas.io.sql.DatabaseError: Execution failed on sql 'ÿþ

                 s e l e c t   d i s t i n c t   * 

                 f r o m   b o m . S a l e s B O M S a m p l e E x p l o s i o n   b 

 ': ('42000', "[42000] [Microsoft][ODBC SQL Server Driver][SQL Server]Incorrect syntax near 'e'. (102) (SQLExecDirectW)")

Process finished with exit code 1

// 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;
}

答案 3 :(得分：1)

使用$arr_1 = array('a', 'b', 'c', 'd'); $arr_2 = array('e', 'f', 'g', 'h'); 或sessionStorage，当您首次加载页面时，您会随机选择每个字母的颜色，然后在刷新时，仅交替它们。

因此，最好使用cookie来保存上次获得的rnd编号，只有在找不到该字母的sessionStorage时才能获得新的随机数。

在这里自己动手（刷新到交替）

  

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

sessionStorage
相关问题
最新问题