时间戳

首页 > 解决方案 > 如何让用户使用 hex 和 css 渐变选择背景颜色

javascript - 如何让用户使用 hex 和 css 渐变选择背景颜色

问题描述

我想这样做，以便用户可以在一个文本框中输入一个十六进制，在另一个文本框中输入另一个十六进制。然后这将使用线性渐变，以便它将第一种颜色渐变到第二种颜色。在代码片段中是它可能产生的示例。我宁愿只使用 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>

标签： javascripthtmlcss

解决方案

我创建了一个示例。

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

推荐阅读