隨機顏色生成器以及如何將其應用于我現有的漸變-有解無憂

我正在做一個創建背景漸變生成器的練習。我將顏色放入輸入中，它使用這兩種顏色從左到右創建漸變。到目前為止它作業正常，但現在我有一個隨機生成 RGB 顏色的按鈕，但我不知道如何將它應用于背景漸變。我知道這個按鈕可以作業，因為我有 console.log'd 它會吐出兩種不同的 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>

uj5u.com熱心網友回復：

轉換為十六進制
不要重復使用 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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/411389.html

標籤：

上一篇：為什么使用斷點會給我的筆記本電腦和電腦相同的結果？

下一篇：我正在學習HTML和CSS，但我不知道聯系表單是如何作業的？