Javascript 随着时间的推移更改链接的颜色（以便它不会在刷新时开始新的循环）

我试图改变一个链接的颜色随着时间的推移，通过彩虹颜色循环。当你刷新的时候，颜色应该和刚才一样，而不是开始一个新的循环（所以CSS动画对我来说也不起作用）

我试图将此计算的颜色应用于链接的悬停函数

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

任何帮助都将不胜感激。

诸如此类的事情

var颜色=[
“#FF0000”，//红色
“#FF7F00”，//橙色
“#FFFF00”，//黄色
“#00FF00”，//绿色
“#0000FF”，//蓝色
“#4B0082”，//靛蓝
'#9400D3'，//紫罗兰色
];
var link=document.getElementById（'link'）；
函数calculateColor（）{
var time=Math.floor（Date.now（）/1000）；
link.style.color=颜色[时间%colors.length]；
}
计算颜色（）；
设置间隔（calculateColor，100）
这可以稍微清理一下，但这应该可以让您开始。我假设色调是您实际想要保存的，因为您的方法使用颜色[0]进行计算。所以我正在保存色调，但您可以修改它以满足您的需要。它使用web存储来保存色调：

color
数组未在任何位置定义。另外，您没有将变量传递给
$（this.css（“color”）。Jquery CSS函数的工作原理如下：
$（this）.CSS（“color”，“000000”）
或
$（this）.css（“颜色”，变量）
@WizardCoder我正在尝试将计算中的颜色应用到悬停链接的颜色。这需要本地状态存储或后端解决方案。JavaScript不是持久性的。你试过什么？每次我刷新链接都是不同的颜色？也许我实施错了？刷新时它不会保持相同的颜色&从序列的同一部分继续。我在第一个问题中粘贴的代码是更改某些threejs粒子颜色的代码。我希望链接与粒子的颜色匹配。在我的代码中，它将取决于刷新所需的时间，因为这里的频率在第一种情况下为1秒，在第二种情况下为5秒。无论如何，我的答案只是一种可能对您有帮助（或没有帮助）的方法，但您不应该期望通过复制和粘贴到项目中就可以得到一些代码。你需要真正了解你在做什么。我很感激，但我来到这个网站是想问一个问题，因为我不知道我在做什么。谢谢你的帮助。这对我一点用都没有。我将它粘贴到我的外部js文件中-是吗？是的。如果没有html，我无法告诉您出了什么问题，但我猜这与链接元素选择器有关。在
$（'link'）
中，你应该在你想要改变颜色的链接上放置任何选择器，想必，它与
材质[i]
是同一个元素，我只是不确定你是如何选择该元素的。材质[i]元素来自我网站上的threejs背景。粒子以颜色旋转，因此我希望链接与粒子的颜色匹配。我认为对链接颜色应用相同的函数会起作用，但我想不出来。我已经尝试使用正确的选择器将您的代码片段添加到js中。mouseenter（function（）{var hue=getNewHue（）；saveHue（hue）；}）
但是我做错了什么html只是
@NPM我修改了
saveHue
函数来设置链接上的颜色。当您希望在运行此命令后在css中看到它的颜色条目时。如果仍然存在问题，可以添加一些console.log以确保它实际运行所有功能。
// init function(run on page load, either fresh or after refresh)
$(function() {
    var hue = null;

    // check if local storage supported
    if (typeof(Storage) !== "undefined") {
        // check if hue saved
        if (sessionStorage.hue) {
            hue = sessionStorage.hue;
        }
    }
    // check if hue is still null, if so, it is a fresh page load 
    // or storage isn't supported and we need to calculate it
    if (!hue) {
        // call your hue function here
        hue = getNewHue();
    }
    // save hue
    saveHue(hue);
});

// run everytime the mouse hovers over your link
// you can convert this to an interval function like
// in Jordi's answer if you want
$('#colorlink').on('hover', function() {
    // get a new hue
    var hue = getNewHue();
    // call your hue function here
    saveHue(hue);
})

function saveHue(hue) {
    // set hue on link
    var hslText = "hsl(" + hue + "," + color[1] + "%," + color[2] + "%)";
    $('#colorlink').css({ color = hslText });

    // also saving this to update materials[i] as well
    // not sure if you still need this
    materials[i].color.setHSL(hue, color[1], color[2]);

    // save hue to storage in case of refresh
    sessionStorage.setItem('hue', hue);
}

function getNewHue() {
    return (60 * (color[0] + time) % 360) / 360;
}