时间戳

首页 > 解决方案 > 生成新颜色而不刷新页面

javascript - 生成新颜色而不刷新页面

问题描述

每次我想用按钮生成新颜色时，我都必须刷新页面，而不是按下按钮生成新颜色。

let hexBtn = document.querySelector('button');

let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
let letters = ["A", "B", "C", "D", "E", "F"];

let hex = numbers.concat(letters);

let array = [];

遍历数组并随机化元素顺序，然后推送到新的空数组。

for (i = 0; i < 6; i++) {
  let random = hex.sort(() => Math.random() - 0.5);
  array.push(random[i]);
}


function hexColor() {
  let joinArray = array.join("");
  let hash = '#'
  let color = hash.concat(joinArray);
  console.log(color);
  document.body.style.backgroundColor = color;
}

hexBtn.addEventListener('click', hexColor);

标签： javascriptdom

解决方案

您只需要简化代码，因为在加载页面上只生成了一种颜色。您可以在hexColor()函数中生成颜色：

颜色是 0 到 255 (RGB) 之间的 3 个值，可以生成 0 到 255*255*255 之间的随机数。
现在，您可以使用Number.toString([base])将十进制随机数转换为十六进制并添加'#'之前。

let hexBtn = document.querySelector('button');

function hexColor() {
  let color_rgb = Math.floor(Math.random() * Math.floor(255*255*255));
  let color_hex = '#'.concat(color_rgb.toString(16));
  console.log(color_hex);
  document.body.style.backgroundColor = color_hex;
}

hexBtn.addEventListener('click', hexColor);
<html>
  <head><title>Button color</title></head>
  <body>
    <button>Generate hex</button>
  </body>
</html>

推荐阅读