如果我们想使用 JavaScript 创建颜色生成器，那么欢迎我们学习我们的教程。

我们知道，颜色以 RGB 或者十六进制格式定义，例如，#000000（黑色）或者 #C0C0C0（灰色）。
为了生成数字，我们使用 Math.random JavaScript 函数，该函数返回 0 到 1 之间的随机数。

下面是这个函数的样子：

function getColor() {
  return "#" + Math.random();
}
console.log(getColor());

现在我们需要将数字转换为具有十六进制值的字符串。
为此，我们使用 toString() 方法。

我们将在 Math.random 函数的末尾添加 .toString(16)。
这是它的样子：

function getColor() {
  return "#" + Math.random().toString(16);
}
console.log(getColor());

第一步已经完成，但这还不是全部。
我们需要删除 (0) 和 (.) 并将结果限制为 6 个字符。
在这种情况下，我们将通过在 Math.random 函数的末尾添加 .slice(2,8) 来使用 slice() 方法。

为什么是 2 和 8？
由于我们想要获得六个字符，我们应该对结果进行切片，从前两个字符开始到第八个字符结束。
这是代码：

function getColor() {
  return (
    "#" + Math.random().toString(16).slice(2, 8)
  );
}
console.log(getColor());

最后，必须将十六进制值设置为背景。
这可以使用另一个函数来完成，该函数将 getColor() 设置为一个变量，并将定义等于该变量的 document.body.style.background。

这是它的样子：

function getColor() {
  return (
    "#" + Math.random().toString(16).slice(2, 8)
  );
}
function setBackground() {
  let bgColor = getColor();
  document.body.style.background = bgColor;
}
setBackground();

完成所有这些步骤后，我们可以按“运行”按钮，每次都会看到随机颜色。
为了防止一直刷新，我们应该在每次点击按钮时生成一个新颜色。
我们需要做的就是在最后添加 setBackground() 函数并告诉浏览器何时运行它。

我们可能猜到，最好的方法是使用 if 语句，该语句将运行 setBackground() 函数，以防按下空格键（keyCode 为 32）的代码。

因此 document.body.keyup 必须等于该函数，并且该函数必须包含一个 if 语句，该语句声明如果 .keyCode==32 ，则 setBackground() 应该运行。

这是代码的示例。
按键盘上的空格键查看结果：

//generator function
function getColor() {
  return (
    "#" + Math.random().toString(16).slice(2, 8)
  );
}
//background color style
function setBackground() {
  let bgColor = getColor();
  document.body.style.background = bgColor;
}
//function press space 
document.body.onkeyup = function(e) {
  if (e.keyCode == 32) {
    setBackground();
  }
};