javascript - 如何为按钮编写代码以生成随机背景颜色渐变
问题描述
我想添加一个在背景中生成随机线性渐变的按钮。当我单击一个按钮或另一个按钮时,下面的代码会生成线性渐变。
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);
解决方案
以下代码段应该可以实现您想要实现的目标。请随时询问是否有不清楚的地方。
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>
推荐阅读
- html - 跨度内的文本向右按下按钮
- android - 如何在 Kotlin 中使 TextView 可见几秒钟然后将其隐藏
- python - 进程池中的 itertuples 不起作用
- python - 如何在 selenium python 中从 FETCH/XHR 获取 Newtwork 状态码
- javascript - 在不带括号的js中调用函数
- python - 无法获取元组列表以正确转换为字符串列表
- azure - 无法识别正确的 COSMOS DB SQL SELECT 语法来检查坐标(点)是否在多边形内
- google-apps-script - GAS:如何格式化工作表中的所有空单元格
- ruby-on-rails - Ruby gsub 用于准确的单词数
- javascript - 正则表达式字母不匹配