如何使用 HTML、CSS 和 JavaScript 创建颜色选择器工具

您是否曾经想过仅使用 HTML、CSS 和 JavaScript 创建自己的交互式工具？在本文中，我们将创建一个有趣且简单的项目：颜色选择器工具。

这个方便的小工具可以让用户选择他们喜欢的任何颜色并立即看到它的 HEX 和 RGB 值。

因此，抓住您最喜欢的代码编辑器，让我们开始吧！

步骤 1：设置您的项目

  1. 创建新文件夹：首先在你的电脑上为这个项目创建一个新文件夹。你可以将其命名为color-picker-tool。
  2. 创建文件：在文件夹内创建三个文件：
    • 索引.html
    • 样式.css
    • 脚本.js

第 2 步：构建 HTML 结构

  1. 在代码编辑器中打开index.html文件。
  2. 添加基本​​ HTML 结构：将以下代码添加到index.html中：或按SHIFT+!然后按Enter设置 Emmet 结构，然后将文档标题更改为"Color Picker Tool".
  3. 也链接你的styles.css和script.js文件。 
     <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Color Picker Tool</title>
     <link rel="stylesheet" href="styles.css">
 </head>
 <body>

     <script src="script.js"></script>
 </body>
 </html>

解释：

  • <!DOCTYPE html>：这告诉浏览器该文档是 HTML5 文档。
  • <html lang="en">：HTML文档的根元素，语言设置为英语。
  • <head>：包含有关文档的元信息，如字符集和标题。
  • <title>：设置网页的标题，显示在浏览器标签页中。
  • <link rel="stylesheet" href="styles.css">：链接到设置页面样式的 CSS 文件。
  • <body>：包含网页的内容。
  • <script src="script.js"></script>：链接到为页面添加交互性的 JavaScript 文件。
  1. 添加正文内容： 
     <div class="color-picker">
   <input type="color" id="colorInput" value="#ff0000">
     <div class="color-info">
        <p>HEX: <span id="hexValue">#ff0000</span></p>
        <p>RGB: <span id="rgbValue">rgb(255, 0, 0)</span></p>
     </div>
 </div>

    解释：

  • <div class="color-picker">：颜色选择器元素的容器。
  • <input type="color" id="colorInput" value="#ff0000">：允许用户选择颜色的输入元素。该value属性设置默认颜色。
  • <div class="color-info">：显示颜色信息的容器。
  • <p>HEX: <span id="hexValue">#ff0000</span></p>：显示所选颜色的十六进制值。
  • <p>RGB: <span id="rgbValue">rgb(255, 0, 0)</span></p>：显示所选颜色的 RGB 值。

以下是我们将得到的：

 

步骤 3：使用 CSS 进行样式设置

  1. 在代码编辑器中打开styles.css文件。
  2. 添加 CSS 样式：将以下代码复制并粘贴到style.css中： 
     body {
     font-family: Arial, sans-serif;
     display: flex;
     justify-content: center;
     align-items: center;
     height: 100vh;
     margin: 0;
     background-color: #f0f0f0;
 }
 .color-picker {
     background-color: #fff;
     padding: 20px;
     border-radius: 8px;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
     text-align: center;
 }
 .color-info {
     margin-top: 20px;
 }
 p {
     margin: 5px 0;
     font-size: 16px;
 }

解释：

  • body：设置页面主体的样式。它使内容垂直和水平居中，并设置浅灰色背景。
  • font-family: Arial, sans-serif;：设置页面上文本的字体。
  • display: flex;：使用 Flexbox 布局页面。
  • justify-content: center;和align-items: center;：使内容居中。
  • height: 100vh;：将高度设置为视口高度的 100%。
  • margin: 0;：删除默认边距。
  • background-color: #f0f0f0;：设置页面的背景颜色。
  • .color-picker：使用白色背景、填充、圆角和阴影来设计颜色选择器容器，以获得类似卡片的外观。
  • .color-info：在顶部添加边距以将其与颜色输入分开。
  • p：根据颜色信息设置段落样式，设置边距和字体大小。

以下是我们将得到的：

此时，我们可以选择颜色，但颜色代码不会显示。要显示颜色代码，我们需要添加一些 JavaScript。

步骤 4：添加 JavaScript 功能

  1. script.js在代码编辑器中打开该文件。
  2. 添加 JavaScript 代码：将以下代码添加到script.js： 
     document.getElementById('colorInput').addEventListener('input', function() {
     const color = this.value;
     document.getElementById('hexValue').textContent = color;
     document.getElementById('rgbValue').textContent = hexToRgb(color);
 });
 function hexToRgb(hex) {
     const r = parseInt(hex.slice(1, 3), 16);
     const g = parseInt(hex.slice(3, 5), 16);
     const b = parseInt(hex.slice(5, 7), 16);
     return `rgb(${r}, ${g}, ${b})`;
 }

    解释：

    • document.getElementById('colorInput')：通过 选择颜色输入元素ID。
    • .addEventListener('input', function() {...})：添加一个事件监听器，当用户选择新颜色时触发。
    • const color = this.value;：获取颜色输入的当前值，为HEX格式。
    • document.getElementById('hexValue').textContent = color;：使用选定的颜色更新十六进制值显示的文本内容。
    • document.getElementById('rgbValue').textContent = hexToRgb(color);：将HEX颜色转换为RGB，并更新RGB值显示。
    • function hexToRgb(hex) {...}：将HEX颜色字符串转换为RGB字符串的函数。
      • parseInt(hex.slice(1, 3), 16)：将十六进制颜色的前两个字符（ 之后#）转换为十进制数，表示红色成分。
      • parseInt(hex.slice(3, 5), 16)：将接下来的两个字符转换为绿色成分。
      • parseInt(hex.slice(5, 7), 16)：将最后两个字符转换为蓝色成分。
      • returnrgb(${r}, ${g}, ${b}) ;：以字符串形式返回 RGB 颜色。

步骤5：测试颜色选择器工具

  1. 在浏览器中打开项目：在 Web 浏览器中打开index.html文件以查看您的颜色选择器工具。
  2. 与工具交互：使用颜色输入选择不同的颜色。选择新颜色时，十六进制值和 RGB 值应自动更新。

最后的想法

恭喜！您已成功使用 HTML、CSS 和 JavaScript 创建了一个颜色选择器工具。

这个项目是练习处理用户输入和操作 DOM 的好方法。你还可以通过添加诸如将颜色值复制到剪贴板或保存喜欢的颜色等功能来进一步增强此工具。

 

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。