如何为按钮编写代码以生成随机背景颜色渐变答案

【问题标题】：how do i write a code for a button to generate random background color gradients如何为按钮编写代码以生成随机背景颜色渐变
【发布时间】：2020-07-08 18:49:00
【问题描述】：

我想添加一个在背景中生成随机线性渐变的按钮。当我单击一个按钮或另一个按钮时，下面的代码会生成线性渐变。

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

css.textContent = gradient.style.background  = "linear-gradient(to right," + color1.value + "," + color2.value +")"; 

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

}
color1.addEventListener("input", setBackground);

color2.addEventListener("input", setBackground);

【问题讨论】：

标签： javascript button random colors linear-gradients

【解决方案1】：

下面的 sn-p 应该做你想要实现的。有不清楚的地方欢迎追问。

const body = document.getElementsByTagName('BODY')[0];
const button = document.getElementsByTagName('BUTTON')[0];

function changeBackground(){
  body.style.background = `linear-gradient(to right,${getRandomHEXColor()},${getRandomHEXColor()})`;
}

function getRandomHEXColor() {
  const SEED = '0123456789abcdef';
  let output = '#';
  while (output.length < 7) {
    output += SEED[Math.floor(Math.random() * SEED.length)];
  }
  return output;
}

button.addEventListener("click", changeBackground);

<html>
  <body>
    <button>CHANGE BACKGROUD</button>
  </body>
</html>

【讨论】：

【解决方案2】：

我这样做是为了完成一项任务，这就是我想出的：

function gradient(){
        var randOne = Math.floor(Math.random()*16777215).toString(16);
        var randTwo = Math.floor(Math.random()*16777215).toString(16);
        var randDeg = Math.floor(Math.random()*361);
        document.body.style.background = "linear-gradient(" + randDeg +"deg , #" + randOne + ", #" + randTwo + ")";
        color.innerHtml = "linear-gradient(" + randDeg +"deg , #" + randOne + ", #" + randTwo + ")";
    }

<body>
    <div class="container">
        <div class="row">
            <h2>Pick a Background Type</h2>
            <hr style="height: 1px; border: solid;border-width: 0; color: black; width: 100%; background-color: black;">
        </div>
        <div class="row">
            <input type="radio" name="bgTypeBtn" id="color" value="color" checked onchange="color()">
            <label for="color">Solid Color</label>
            <input type="radio" name="bgTypeBtn" id="gradient" value="gradient" onchange="gradient()">
            <label for="gradient">Gradient</label>
            <input type="radio" name="bgTypeBtn" id="image" value="image" onchange="image()">
            <label for="image">Image</label>
        </div>
    </div>
</body>

我添加了 rand 度数，这样它就不会每次都一样了。

【讨论】：