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

【问题标题】：How to generate multiple colors from a Color by Javascript如何通过Javascript从颜色生成多种颜色
【发布时间】：2018-05-24 19:24:01
【问题描述】：

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

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

【问题讨论】：

你可以保存在localStorage中
放一些代码，一些例子。如果没有任何工作，您希望做什么！
你能告诉我怎么做吗？我不想把它保存在数据库中
你在这里假设了很多，并没有发布任何内容供任何人继续使用....编辑你的帖子并举例说明你必须给人们一些想法和内容支持提出你的要求。
@kapilPaul 提供了一些代码

标签： javascript colors auto-generate

【解决方案1】：

对你有帮助

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

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

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

【讨论】：

谢谢。但我想生成。我不想放颜色代码或颜色名称。就像我想生成 100 种颜色然后我会生成 100 种颜色取决于我给的 1 种颜色
var color=randomColor({hue: 'red', count: 100})你可以这样访问

【解决方案2】：

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

我能做的就是猜测。

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

这是一个简单的方法，在 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 或本地存储在生成颜色后保留颜色。这样，您第一次生成它，并且仅当您存储它的资源被破坏时才生成它。

编辑 - 对评论的回答：

如果您只想输入一种（或几种）颜色，您可以简单地完成。

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，并在该函数中检查颜色对象或颜色是否存在于本地存储中。如果不生成并存储它们，如果它在那里，只需加载它并应用于元素。

要检查某个东西是否存在，只需尝试检索它，如果它为 null，则它不存在。

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

【讨论】：

谢谢。你能告诉我如何将它保存在本地存储中