gpt4 book ai didi

javascript - 如何让用户使用十六进制和 css 渐变选择背景颜色

转载 作者:行者123 更新时间:2023-12-01 16:17:26 25 4
gpt4 key购买 nike

我想这样做,以便用户可以在一个文本框中输入一个十六进制,而在另一个文本框中输入另一个十六进制。然后这将使用线性渐变,以便它将第一种颜色渐变到第二种颜色。在代码片段中是它可能产生的示例。我宁愿只使用 css 和 html,但如果需要可以使用 javascript。感谢任何试图解决这个问题的人。如果我含糊不清,我会回答任何问题。

body {
background: linear-gradient(to right, #ffb6ce, #ff00ea);
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>

</body>
</html>

最佳答案

我创建了一个示例。

const body = document.querySelector("body");
const startInput = document.querySelector("#start");
const endInput = document.querySelector("#end");

let startHex = "#fff";
let endHex = "#fff";

let gradient;

function styleBody(){
gradient = `linear-gradient(to right, ${startHex}, ${endHex})`;
body.style.background = gradient;
}

startInput.addEventListener("input", () => {
startHex = event.target.value;
styleBody();
});

endInput.addEventListener("input", () => {
endHex = event.target.value;
styleBody();
});
<input type="color" id="start">
<input type="color" id="end">

关于javascript - 如何让用户使用十六进制和 css 渐变选择背景颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62397284/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com