随机颜色生成器以及如何将其应用于我现有的渐变

Question

我正在做一个创建背景渐变生成器的练习。我将颜色放入输入中，它使用这两种颜色创建从左到右的渐变。到目前为止它工作正常，但现在我有一个随机生成 RGB 颜色的按钮，但我不知道如何将它应用于背景渐变。我知道该按钮有效，因为我有 console.log 它并且它吐出两种不同的 rgb 颜色。

var css = document.querySelector("h3");
var color1 = document.querySelector(".color1");
var color2 = document.querySelector(".color2");
var body = document.getElementById("gradient");
var button1 = document.querySelector(".button1");

function setGradient() {
  body.style.background =
    "linear-gradient(to right, " +
    color1.value +
    ", " +
    color2.value +
    ")";

  css.textContent = body.style.background + ";";
}

function randomColorGenerator() {
  var color1 = "rgb" + "(" + (Math.floor(Math.random() * 255) +
    ", " +
    Math.floor(Math.random() * 255) +
    ", " +
    Math.floor(Math.random() * 255) +
    ")" + ";");

  var color2 = "rgb" + "(" + (Math.floor(Math.random() * 255) +
    ", " +
    Math.floor(Math.random() * 255) +
    ", " +
    Math.floor(Math.random() * 255) +
    ")" + ";");
}

color1.addEventListener("input", setGradient);

color2.addEventListener("input", setGradient);

button1.addEventListener("click", randomColorGenerator);

<body id="gradient" onload="setGradient()">
  <h1>Background Generator</h1>
  <input class="color1" type="color" name="color1" value="#00ff00">
  <input class="color2" type="color" name="color2" value="#ff0000">
  <h2>Current CSS Background</h2>
  <button class='button1'>Random Color</button>
  <h3></h3>
  <script type="text/javascript" src="script.js"></script>

</body>

Answer 1

转换为十六进制
不要重复使用 color1/color2 变量
转换前设置颜色

注意：很多人想要循环第二种颜色，以防得到相同的值

const rgbToHex = rgb => '#' + (rgb.match(/[0-9|.]+/g).map((x, i) => i === 3 ? parseInt(255 * parseFloat(x)).toString(16) : parseInt(x).toString(16)).join('')).padStart(2, '0').toUpperCase();


var css = document.querySelector("h3");
var color1 = document.querySelector(".color1");
var color2 = document.querySelector(".color2");
var body = document.getElementById("gradient");
var button1 = document.querySelector(".button1");

function setGradient() {
  body.style.background =
    "linear-gradient(to right, " +
    color1.value +
    ", " +
    color2.value +
    ")";

  css.textContent = body.style.background + ";";
}

function randomColorGenerator() {
  var col1 = "rgb" + "(" + (Math.floor(Math.random() * 255) +
    ", " +
    Math.floor(Math.random() * 255) +
    ", " +
    Math.floor(Math.random() * 255) +
    ")" + ";");

  var col2 = "rgb" + "(" + (Math.floor(Math.random() * 255) +
    ", " +
    Math.floor(Math.random() * 255) +
    ", " +
    Math.floor(Math.random() * 255) +
    ")" + ";");
    console.log(col1)
    color1.value=rgbToHex(col1)
    color2.value=rgbToHex(col2)
    console.log(color1.value,color2.value)
    setGradient()
}

color1.addEventListener("input", setGradient);

color2.addEventListener("input", setGradient);

button1.addEventListener("click", randomColorGenerator);

<body id="gradient" onload="setGradient()">
  <h1>Background Generator</h1>
  <input class="color1" type="color" name="color1" value="#00ff00">
  <input class="color2" type="color" name="color2" value="#ff0000">
  <h2>Current CSS Background</h2>
  <button class='button1'>Random Color</button>
  <h3></h3>
  <script type="text/javascript" src="script.js"></script>

</body>

随机颜色生成器以及如何将其应用于我现有的渐变

Random Color Generator and how to apply it to my existing Gradient

javascript

css

dom

gradient

colors