猿问

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

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


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


犯罪嫌疑人X
浏览 77回答 2
2回答

鸿蒙传说

以下代码段应该可以实现您想要实现的目标。请随时询问是否有不清楚的地方。const body = document.getElementsByTagName('BODY')[0];const button = document.getElementsByTagName('BUTTON')[0];function changeBackground(){&nbsp; body.style.background = `linear-gradient(to right,${getRandomHEXColor()},${getRandomHEXColor()})`;}function getRandomHEXColor() {&nbsp; const SEED = '0123456789abcdef';&nbsp; let output = '#';&nbsp; while (output.length < 7) {&nbsp; &nbsp; output += SEED[Math.floor(Math.random() * SEED.length)];&nbsp; }&nbsp; return output;}button.addEventListener("click", changeBackground);<html>&nbsp; <body>&nbsp; &nbsp; <button>CHANGE BACKGROUD</button>&nbsp; </body></html>
0

烙印99

我这样做是为了完成一项任务，这就是我想出的：function gradient(){&nbsp; &nbsp; &nbsp; &nbsp; var randOne = Math.floor(Math.random()*16777215).toString(16);&nbsp; &nbsp; &nbsp; &nbsp; var randTwo = Math.floor(Math.random()*16777215).toString(16);&nbsp; &nbsp; &nbsp; &nbsp; var randDeg = Math.floor(Math.random()*361);&nbsp; &nbsp; &nbsp; &nbsp; document.body.style.background = "linear-gradient(" + randDeg +"deg , #" + randOne + ", #" + randTwo + ")";&nbsp; &nbsp; &nbsp; &nbsp; color.innerHtml = "linear-gradient(" + randDeg +"deg , #" + randOne + ", #" + randTwo + ")";&nbsp; &nbsp; }<body>&nbsp; &nbsp; <div class="container">&nbsp; &nbsp; &nbsp; &nbsp; <div class="row">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h2>Pick a Background Type</h2>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <hr style="height: 1px; border: solid;border-width: 0; color: black; width: 100%; background-color: black;">&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="row">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="radio" name="bgTypeBtn" id="color" value="color" checked onchange="color()">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label for="color">Solid Color</label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="radio" name="bgTypeBtn" id="gradient" value="gradient" onchange="gradient()">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label for="gradient">Gradient</label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="radio" name="bgTypeBtn" id="image" value="image" onchange="image()">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label for="image">Image</label>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div></body>
0
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答