我想添加一个在背景中生成随机线性渐变的按钮。当我单击一个按钮或另一个按钮时，下面的代码会生成线性渐变。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);
2 回答
鸿蒙传说
TA贡献1865条经验 获得超7个赞
以下代码段应该可以实现您想要实现的目标。请随时询问是否有不清楚的地方。
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>
烙印99
TA贡献1829条经验 获得超13个赞
我这样做是为了完成一项任务，这就是我想出的：
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>
添加回答
举报
0/150
提交
取消