📌  相关文章
📜  颜色选择器 js - Html (1)

📅  最后修改于: 2023-12-03 15:12:53.296000             🧑  作者: Mango

颜色选择器 js - Html

介绍

颜色选择器（Color Picker）是一种常见的Web界面元素，用于选择颜色。这个JS和HTML结合的颜色选择器组件，可以方便地嵌入到你的web应用中并提供友好的用户体验。

功能
  • 支持选择颜色
  • 支持自定义颜色
  • 支持预览
  • 支持多种颜色格式（RGB、HEX、HSL、HSV）
示例代码
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Color Picker Demo</title>
  <script src="colorPicker.js"></script>
  <link rel="stylesheet" href="colorPicker.css">
</head>
<body>
  <label for="color-picker">Pick a color</label>
  <input type="text" id="color-picker">

  <script>
    var colorPicker = new ColorPicker(document.getElementById("color-picker"), {
      format: "rgb"
    });

    colorPicker.addEventListener("change", function(event) {
      console.log(event.detail.color);
    });
  </script>
</body>
</html>

详细的代码和说明请访问 GitHub 仓库。

属性
format
colorPicker.format = "rgb";

设置返回的颜色格式，可选值为 "rgb"，"hex"，"hsl" 或 "hsv"。默认值为 "rgb"。

事件
change

当选择的颜色发生变化时触发。

colorPicker.addEventListener("change", function(event) {
  console.log(event.detail.color);
});
扩展

你可以通过修改 CSS 样式和 JavaScript 代码来扩展这个颜色选择器的样式和功能。

总结

颜色选择器是一个常见的 Web 界面组件，也是通过 HTML 和 JS 实现的一个非常有用的工具。这个组件的使用非常灵活，允许用户自定义颜色、预览和多种颜色格式。