你是否想过仅用 HTML、CSS 和 来创建你自己的交互式工具？在这篇文章中，我们将创建一个有趣且简单的项目：颜色选择器工具。
这个方便的小工具可以让用户选择他们喜欢的任何颜色，并立即看到它的十六进制和 RGB 值。
所以js选择器，准备好你的代码编辑器，让我们开始吧！
第一步：设置你的项目
创建一个新文件夹： 在你的电脑上创建一个新的文件夹来存放这个项目。你可以将它命名为 color--tool。
创建文件： 在文件夹中创建三个文件：
文件夹结构
第二步：构建 HTML 结构
在你的代码编辑器中打开 index.html 文件。
添加基本的 HTML 结构： 在 index.html 中添加以下代码：或者按下 SHIFT+! 然后按下 Enter 来设置 Emmet 结构，然后将文档标题更改为 "Color Tool"。
<!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>
解释：
添加主体内容：
<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>
解释：
现在我们应该看到一个简单的界面：
基本界面
第三步：使用 CSS 添加样式
在你的代码编辑器中打开 .css 文件。
添加 CSS 样式： 将以下代码复制粘贴到 .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;
}
解释：
现在js选择器，我们的界面应该看起来更美观了：
带样式的界面
目前，我们可以选择颜色，但颜色代码不会显示。为了让颜色代码显示，我们需要添加一些 代码。
第四步：添加 功能
在你的代码编辑器中打开 .js 文件。
添加 代码： 将以下代码添加到 .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})`;
}
解释：
第五步：测试你的颜色选择器工具
在浏览器中打开项目： 在网页浏览器中打开 index.html 文件，查看你的颜色选择器工具。
与工具交互： 使用颜色输入选择不同的颜色。当你选择新颜色时，十六进制和 RGB 值应该会自动更新。
最后的想法
恭喜！你已经成功地使用 HTML、CSS 和 创建了一个颜色选择器工具。
这个项目是练习处理用户输入和操作 DOM 的一个好方法。你可以通过添加复制颜色值到剪贴板或保存喜欢的颜色等功能来进一步增强这个工具。
享受实验和学习的乐趣！
往期推荐
我是宝哥。欢迎长按加我好友，第一时间和你分享前端行业趋势，面试资源，学习途径等等。
添加好友备注【加群】拉你进前端分享群
公众号：前端开发博客专注前端开发技术，分享前端开发资源和WEB 前沿资讯，如果喜欢我的分享，给 宝哥 点一个赞或者分享都是对我的支持