javascript - 随着时间的推移改变链接的颜色(这样它就不会在刷新时开始新的循环)

Question

我正在尝试随着时间的推移循环使用彩虹色来更改链接的颜色。当您刷新时，颜色应该仍然与刚才相同，而不是开始新的循环(所以 CSS 动画对我来说也没有用)。

我正在尝试将此计算的颜色应用于链接的悬停功能。

  var h = ( 60 * ( color[0] + time ) % 360 ) / 360;
  materials[i].color.setHSL( h, color[1], color[2] );
  var time = Date.now() * 0.00005;

如有任何帮助，我们将不胜感激。

Answer 1

类似的东西？

var colors = [
  '#FF0000', // Red
  '#FF7F00', // Orange
  '#FFFF00', // Yellow
  '#00FF00', // Green
  '#0000FF', // Blue
  '#4B0082', // Indigo
  '#9400D3', // Violet
];

var link = document.getElementById('link');

function calculateColor() {
  var time = Math.floor(Date.now() / 1000);
  link.style.color = colors[time % colors.length];
}

calculateColor();
setInterval(calculateColor, 100);

<p><a id="link" href="#">Link</a></p>

如果你需要另一个频率而不是 1 秒，你可以将时间戳保留到下一个时间间隔......我不知道我是否说清楚了，因为我不知道如何解释它。它会是这样的:

var colors = [
  '#FF0000', // Red
  '#FF7F00', // Orange
  '#FFFF00', // Yellow
  '#00FF00', // Green
  '#0000FF', // Blue
  '#4B0082', // Indigo
  '#9400D3', // Violet
];

var link = document.getElementById('link');

var freq = 5; // seconds
var time = Math.floor(Date.now() / 1000);

function calculateColor() {
  var now = Math.floor(Date.now() / 1000);
  var offset = now - time;
  time = offset > freq ? now : time;
  link.style.color = colors[time % colors.length];
}

calculateColor();
setInterval(calculateColor, 100);

<p><a id="link" href="#">Link</a></p>