Question

我使用vueJS为随机十六进制颜色创建了一个函数，但是如果我选择函数的输出，并将输出放在W3C的生成器上（例如：Link：HERE）

该功能无法正常工作

所以我希望看到这个问题，因为它非常禁用，因为我不能拥有Hex Color的真值。

＆＃13;

let random = function () {

  let text = "";
  const possible = "ABCDEF0123456789";

  for (var i = 0; i < 6; i++)
  text += possible.charAt(Math.floor(Math.random() *                               possible.length).toString(16));
     
  return '#' + text

}

const section = document.querySelector('section');
const title = document.querySelector('h1')

section.style.backgroundColor = random();
title.textContent = random();

＆＃13;

section {
  width: 50px;
  height: 50px;
}

＆＃13;

<section></section>
<h1></h1>

＆＃13;

Answer 1

一个简单的

section.style.backgroundColor = "#" + Math.floor(Math.random() * 16777215).toString(16);

足够的代码

其中16777215 is #FFFFFF为十进制，toString(16)创建十六进制变体。阅读更多; Number.prototype.toString()：

Answer 2

您已经两次调用随机函数，一次用于文本显示，一次用于颜色方块，因此它们不会进行数学运算。

这是一个修复：

＆＃13;

let random = function () {

  let text = "";
  const possible = "ABCDEF0123456789";

  for (var i = 0; i < 6; i++)
  text += possible.charAt(Math.floor(Math.random() *                               possible.length).toString(16));
     
  return '#' + text

}

const section = document.querySelector('section');
const title = document.querySelector('h1')

const color = random();
section.style.backgroundColor = color;
title.textContent = color;

＆＃13;

section {
  width: 50px;
  height: 50px;
}

＆＃13;

<section></section>
<h1></h1>

＆＃13;

Answer 3

＆＃13;

let random = function () {

  let text = "";
  const possible = "ABCDEF0123456789";

  for (var i = 0; i < 6; i++)
  text += possible.charAt(Math.floor(Math.random() *                               possible.length).toString(16));
     
  return '#' + text

}

const section = document.querySelector('section');
const title = document.querySelector('h1')
var randomColor = random(); //get the color
section.style.backgroundColor = randomColor;
title.textContent = randomColor;

＆＃13;

section {
  width: 50px;
  height: 50px;
}

＆＃13;

<section></section>
<h1></h1>

＆＃13;

因为你两次调用随机函数（section.style和title.textContent），所以调用它一次并存储值并使用它，你想要的地方。

使用随机的十六进制颜色，与真正的生成器使用不同的值

3 个答案: