hex转换rgb_深入JavaScript：如何创建Hex2RGB颜色转换器

最新推荐文章于 2023-03-15 09:36:56 发布

cumichun6193

最新推荐文章于 2023-03-15 09:36:56 发布

阅读量1k

点赞数

文章标签： python js javascript java vue ViewUI

原文链接：https://www.freecodecamp.org/news/how-to-create-a-hex2rgb-color-converter-ce32d32afd1f/

版权

hex转换rgb

Update (23/07/2019): I have corrected a few grammatical errors and changed app.js code a bit by removing the checkBG function.

更新(23/07/2019)：我更正了一些语法错误，并通过删除checkBG函数对app.js代码进行了一些更改。

In this article, we’ll be creating a web-app that converts color codes between Hexadecimal form and RGB form.

在本文中，我们将创建一个Web应用程序，该应用程序可在十六进制形式和RGB形式之间转换颜色代码。

You can find a demo here and the source code here.

您可以在此处找到演示和源代码。

项目结构： (Project Structure:)

The project structure is pretty simple.

项目结构非常简单。

index.html : Contains the structure of the app.
index.html ：包含应用程序的结构。
style.css : Styles the page.
style.css ：设置页面样式。
app.js : Contains all the magic code.
app.js ：包含所有魔术代码。

理念： (Idea:)

Here’s the list of things I wanted this app to perform:

以下是我希望该应用执行的操作的列表：

Whenever something is typed in a text-field for hex, the app should check if the color is valid. If it is, convert it to RGB, set it as the background and then put the RGB value in the RGB text-field and vice versa.
每当在文本字段中键入十六进制的内容时，应用程序应检查颜色是否有效。如果是这样，请将其转换为RGB，将其设置为背景，然后将RGB值放入RGB文本字段中，反之亦然。
If a short hex color code is typed into the text-field, expand it when the text-field loses focus (user clicks outside of text area).
如果在文本字段中键入了一个短的十六进制颜色代码，则当文本字段失去焦点(用户在文本区域外单击)时，将其展开。
Automatically prepend ‘#’ symbol to the hex input.
将“＃”符号自动添加到十六进制输入的前面。

让我们开始！ (Let’s Begin!)

index.html (index.html)

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Hex to RGB Converter</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="head">
    HEX &lt;--&gt; RGB
  </div>
  <div id="content">
    <input type="text" id="hex" placeholder="hex">
    <img id="hexError" class="hidden" src="data:image/svg+xml;utf8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1NzYgNTEyIj48cGF0aCBkPSJNNTY5LjUxNyA0NDAuMDEzQzU4Ny45NzUgNDcyLjAwNyA1NjQuODA2IDUxMiA1MjcuOTQgNTEySDQ4LjA1NGMtMzYuOTM3IDAtNTkuOTk5LTQwLjA1NS00MS41NzctNzEuOTg3TDI0Ni40MjMgMjMuOTg1YzE4LjQ2Ny0zMi4wMDkgNjQuNzItMzEuOTUxIDgzLjE1NCAwbDIzOS45NCA0MTYuMDI4ek0yODggMzU0Yy0yNS40MDUgMC00NiAyMC41OTUtNDYgNDZzMjAuNTk1IDQ2IDQ2IDQ2IDQ2LTIwLjU5NSA0Ni00Ni0yMC41OTUtNDYtNDYtNDZ6bS00My42NzMtMTY1LjM0Nmw3LjQxOCAxMzZjLjM0NyA2LjM2NCA1LjYwOSAxMS4zNDYgMTEuOTgyIDExLjM0Nmg0OC41NDZjNi4zNzMgMCAxMS42MzUtNC45ODI

最低0.47元/天解锁文章

cumichun6193

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
hex转换rgb_深入JavaScript：如何创建Hex2RGB颜色转换器

hex转换rgbUpdate (23/07/2019): I have corrected a few grammatical errors and changed app.js code a bit by removing the checkBG function. 更新(23/07/2019)：我更正了一些语法错误，并通过删除checkBG函数对app.js代码进行了一些更改。 In th...
复制链接

扫一扫