如何从列表中生成随机颜色?提神后保持颜色不变是很重要的

Question

我想为一个具有唯一id的标签元素分配一种颜色。颜色应该从列表中选择，并且在重新加载或刷新组件后，标签的颜色不应该改变。我用下面的方法根据标签id生成随机颜色，但是我找不到从特定列表中选择颜色的方法。

function hashCode(str) {
//String#hashCode
var hash = 0
for (var i = 0; i < str.length; i++) {
hash = str.charCodeAt(i) + ((hash << 5) - hash)
}
console.log(hash)
return hash
}
function intToRGB(i) {
var c = (i & 0x00ffffff).toString(16).toUpperCase()
return '00000'.substring(0, 6 - c.length) + c
}
export const colorGenerator = key =>
intToRGB(hashCode(key)) ? `#${intToRGB(hashCode(key))}` : '#774FFF'

Answer 1

在重新加载或刷新组件后，标签的颜色不应该改变把

您可以将颜色保存为浏览器会话存储中的键值对-会话存储仅在选项卡打开时持续，因此如果您的函数检查并发现会话存储中存在颜色，您可以使用它而不是随机一个。https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage

我找不到从特定列表中选择颜色的方法。

定义一个包含列表中所有颜色的数组。将数组长度作为随机数的模。这将为您提供一个随机数组索引。colorList[randomIndex]将从你的列表中给你一个随机的颜色。