Question

我想从单色中生成多种颜色，我将给出。我有一些代码，这是有效的。但每次刷新时颜色都会发生变化。我希望每次刷新时颜色都不会改变。我怎样才能做到这一点？有人可以帮忙吗？

示例链接：https://randomcolor.llllll.li/

Answer 1

确切的代码/问题在哪里？

我能做的最好的就是猜测。

每次生成颜色时都需要使用相同的生成过程，最后使用相同的颜色，并以满足您的方式将其应用于所需的元素。

这是一种简单的方法，在HTML中使用

<some parent element onload="loadColors()">

现在每次将该元素加载到DOM中（它将在第一次访问和刷新时），它将执行您的函数。

在JS中：

var loadcolors = function(){
   // your process to generate color here
   var yourGeneratedColor = ???
   // bind that color to your elements, for example:
   document.getElementById('Id-of-your-element').backgroundColor = your GeneratedColor;
}

如果您使用随机播种或生成过程非常耗费资源，您可能会选择使用cookie或本地存储来生成颜色。这样你就可以第一次生成它，只有当你存储它的资源被破坏时才会生成它。

编辑 - 回答评论：

如果您只想输入1种颜色（或几种颜色），您可以轻松完成。

var yourColor = color + ""; // to make sure its string
localStorage.setItem('oneColor', yourColor); // store color under oneColor name in local storage
var retrievedColor = localStorage.getItem('oneColor'); // retrieve it's value

如果您需要存储多种颜色，则需要将它们全部存储到对象中，然后在保存之前对它们进行字符串化。

var myColors = {
// object with my colors or array of colors, even arrays of colors..
}

// Put the object into storage
localStorage.setItem('storedColors', JSON.stringify(myColors));

// Retrieve the object from storage
var retrievedColors = localStorage.getItem('storedColors');

您仍然可以使用我在上面显示的onload并在该函数中检查本地存储中是否存在颜色对象或颜色。如果没有生成并存储它们，如果它只是加载它并应用于元素。

要检查是否存在某些内容，只需尝试检索它，如果它为空它就不存在。

if (localStorage.getItem("item") === null) // not there

Answer 2

它会对你有所帮助

＆＃13;

var color=["red","green","yellow"];
//var color=randomColor({hue: 'red', count: 18})
document.getElementById("div_One").style.backgroundColor=color[0];
document.getElementById("div_two").style.backgroundColor=color[1];
document.getElementById("div_three").style.backgroundColor=color[2];

＆＃13;

div{
width:100px;
height:100px;
}

＆＃13;

<div  id="div_One"></div>
<div  id="div_two"></div>
<div  id="div_three"></div>

＆＃13;

如何通过Javascript从Color生成多种颜色

2 个答案: