Question

我想迭代我的颜色列表并将它们显示给我 h1标签的Id名称为id ='Follow'。有人可以善待帮助我解决这个问题吗？

 function colorScheme() {
  var hash = '#';
  var colorHex = ['00BFB2', '1A5E63', '028090', 'F0F3BD', '#C64191'];
  for (var i = 0; i < colorHex.length; i++) {
    hash += colorHex[Math.floor(Math.random())];
  }
  return hash;
}

function chooseColor() {
  var reference = colorScheme();
  Follow.style.color = reference;
}

setInterval('chooseColor()', 300);

Answer 1

您选择随机数的方式存在问题。查看this answer以获取有关如何在范围内选择随机int的更多信息。

 function colorScheme() {
  var colorHex = ['00BFB2', '1A5E63', '028090', 'F0F3BD', 'C64191'];
  var randomIndex =  Math.floor(Math.random() * (colorHex.length));
  return '#' + colorHex[randomIndex];
}

function chooseColor() {
  var reference = colorScheme();
  console.log(reference);
  document.getElementById('follow').style.color = reference;
}

setInterval(chooseColor, 300);

<div id="follow">Lorem Ipsum Lorem Ipsum</div>

Answer 2

您可以代替page load使用css animation和keyframes

你也可以控制时间

您会在代码段中找到coloring keyframs

＆＃13;

@keyframes coloring {
    0%{color:#000;}
    20%{color:#00BFB2;}
    40%{color:#1A5E63;}
    60%{color:#028090;}
    80%{color:#F0F3BD;}
    100%{color:#C64191;}
}

#follow{
 -webkit-animation: coloring 5s infinite; /* Safari 4+ */
  -moz-animation:   coloring 5s infinite; /* Fx 5+ */
  -o-animation:      coloring 5s infinite; /* Opera 12+ */
  animation:         coloring 5s infinite; /* IE 10+, Fx 29+ */
}

＆＃13;

<h1 id="follow">Hello world</h1>

＆＃13;

生成器对<h1>标签的顺序着色

2 个答案: