我如何為按鈕編寫代碼以生成隨機背景顏色漸變

Question

我想添加一個在背景中生成隨機線性漸變的按鈕。 當我單擊一個按鈕或另一個按鈕時，下面的代碼會生成線性漸變。

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);

Answer 1

以下代碼段應該可以完成您想要實現的目標。 如果有什么不清楚的地方，請隨時提問。

 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>

Answer 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>

我添加了蘭特度數，這樣每次都不一樣。

我如何為按鈕編寫代碼以生成隨機背景顏色漸變

問題描述

2 個解決方案

解決方案1
0 2020-03-28 01:13:39

解決方案2
0 2021-04-09 03:24:50

我如何為按鈕編寫代碼以生成隨機背景顏色漸變

問題描述

2 個解決方案

解決方案1 0 2020-03-28 01:13:39

解決方案2 0 2021-04-09 03:24:50

解決方案1
0 2020-03-28 01:13:39

解決方案2
0 2021-04-09 03:24:50