Wie konvertiere ich einen Hex-Wert mit JavaScript in einen RGBA-Wert?
Beim Entwerfen von Webseiten verwenden wir Farben, um die Webseiten attraktiver und attraktiver zu gestalten. Normalerweise verwenden wir Hexadezimalcodes zur Darstellung von Farben, aber manchmal müssen wir einer Farbe Transparenz hinzufügen, was durch RGBA-Werte erreicht werden kann.
Hex-Farbwerte werden durch #RRGGBBAA dargestellt und RGBA-Farbwerte werden durch rgba(rot, grün, blau, alpha) dargestellt. Hier sind einige Beispiele für RGBA- und HEX-Werte -
Input: #7F11E0 Output: rgba( 127, 17, 224, 1 ) Input: #1C14B0 Output: rgba( 28, 20, 176, 1 )
In diesem Artikel besprechen wir verschiedene Möglichkeiten zur Konvertierung von Hex in RGBA mithilfe von Javascript.
Verwenden Sie die Methoden parseInt und String.substring
Verwenden Sie Array-Destrukturierung und reguläre Ausdrücke
Verwenden Sie die Methoden ParseInt und String.substring
Die FunktionparseInt() akzeptiert zwei Parameter: eine Zeichenfolge, die eine Zahl darstellt, und eine Zahl, die die Basis darstellt. Anschließend wird die Zeichenfolge in eine Ganzzahl in der angegebenen Basis konvertiert und das Ergebnis zurückgegeben.
Die MethodeString.substring wird verwendet, um einen Teil einer Zeichenfolge zu extrahieren, indem die Start- und Endpositionen ermittelt werden.
Um HEX in RGBA zu konvertieren, verwenden wir die folgenden Schritte.
Behalten Sie das # bei und verwenden Sie die Methode String.substring, um nacheinander ein Paar aus zwei Zeichen der Hex-Zeichenfolge zu extrahieren.
Verwenden Sie nach der Extraktion die Methode parseInt, um jedes Paar in eine Ganzzahl umzuwandeln. Wir wissen, dass es sich bei diesen Paaren um Hexadezimalcodes handelt, daher müssen wir 16 an das zweite Argument von parseInt übergeben.
Nachdem Sie jedes Paar Hexadezimalcodes in Ganzzahlen konvertiert haben, verketten Sie sie im RGBA-Format.
Beispiel
In diesem Beispiel konvertieren wir Hex-Code in RGBA.
<!DOCTYPE html>
<html>
<head>
<title>Convert Hex to RGBA value using JavaScript</title>
</head>
<body>
<h3>Converting Hex to RGBA value parseInt() and String.substring() methods</h3>
<p id="input"> Hex Value: </p>
<p id="output"> RGBA Value: </p>
<script>
let hex = "#7F11E0";
let opacity = "1";
// Convert each hex character pair into an integer
let red = parseInt(hex.substring(1, 3), 16);
let green = parseInt(hex.substring(3, 5), 16);
let blue = parseInt(hex.substring(5, 7), 16);
// Concatenate these codes into proper RGBA format
let rgba = ` rgba(${red}, ${green}, ${blue}, ${opacity})`
// Get input and output fields
let inp = document.getElementById("input");
let opt = document.getElementById("output");
// Print the values
inp.innerHTML += hex;
opt.innerText += rgba;
</script>
</body>
</html>
Verwenden Sie die Methoden Array.map() und String.match()
Die Javascript-Array-map()-Methode erstellt ein neues Array, das die Ergebnisse des Aufrufs der bereitgestellten Funktion für jedes Element im Array enthält.
Die MethodeString.match wird verwendet, um Übereinstimmungen abzurufen, wenn eine Zeichenfolge mit einem regulären Ausdruck abgeglichen wird.
Um HEX in RGBA zu konvertieren, verwenden wir die folgenden Schritte.
Verwenden Sie den regulären Ausdruck /ww/g und die Methode String.match, um jede Folge von zwei aufeinanderfolgenden alphanumerischen Zeichen einer hexadezimalen Zeichenfolge abzugleichen.
Sie erhalten drei Paare alphanumerischer Zeichen in einem Array und konvertieren diese Zeichen mithilfe der Methoden Array.map und parseInt in Ganzzahlen.
Beispiel
In diesem Beispiel konvertieren wir Hex-Code in RGBA.
<!DOCTYPE html>
<html>
<head>
<title>Converting Hex to RGBA value using JavaScript</title>
</head>
<body>
<h3>Convert Hex to RGBA value using Array.map() and String.match() methods</h3>
<p id="input"> Hex: </p>
<p id="output"> RGBA: </p>
<script>
let hex = "#7F11E0";
let opacity = "1";
// Use a regular expression to extract the individual color values from the hex string
let values = hex.match(/\w\w/g);
// Convert the hex color values to decimal values using parseInt() and store them in r, g, and b
let [r, g, b] = values.map((k) => parseInt(k, 16))
// Create the rgba string using the decimal values and opacity
let rgba = ` rgba( ${r}, ${g}, ${b}, ${opacity} )`
// Get input and output fields
let inp = document.getElementById("input");
let opt = document.getElementById("output");
// Print the values
inp.innerHTML += hex;
opt.innerText += rgba;
</script>
</body>
</html>
Das obige ist der detaillierte Inhalt vonWie konvertiere ich einen Hex-Wert mit JavaScript in einen RGBA-Wert?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1376
52
Ersetzen Sie Stringzeichen in JavaScript
Mar 11, 2025 am 12:07 AM
Detaillierte Erläuterung der Methode für JavaScript -Zeichenfolge und FAQ In diesem Artikel werden zwei Möglichkeiten untersucht, wie String -Zeichen in JavaScript ersetzt werden: Interner JavaScript -Code und interne HTML für Webseiten. Ersetzen Sie die Zeichenfolge im JavaScript -Code Die direkteste Möglichkeit ist die Verwendung der Ersatz () -Methode: str = str.replace ("find", "ersetzen"); Diese Methode ersetzt nur die erste Übereinstimmung. Um alle Übereinstimmungen zu ersetzen, verwenden Sie einen regulären Ausdruck und fügen Sie das globale Flag G hinzu:: STR = Str.Replace (/fi
Wie erstelle ich meine eigenen JavaScript -Bibliotheken?
Mar 18, 2025 pm 03:12 PM
In Artikel werden JavaScript -Bibliotheken erstellt, veröffentlicht und aufrechterhalten und konzentriert sich auf Planung, Entwicklung, Testen, Dokumentation und Werbestrategien.
Wie optimiere ich den JavaScript -Code für die Leistung im Browser?
Mar 18, 2025 pm 03:14 PM
In dem Artikel werden Strategien zur Optimierung der JavaScript -Leistung in Browsern erörtert, wobei der Schwerpunkt auf die Reduzierung der Ausführungszeit und die Minimierung der Auswirkungen auf die Lastgeschwindigkeit der Seite wird.
Wie debugge ich den JavaScript -Code effektiv mithilfe von Browser -Entwickler -Tools?
Mar 18, 2025 pm 03:16 PM
In dem Artikel werden effektives JavaScript -Debuggen mithilfe von Browser -Entwickler -Tools, der Schwerpunkt auf dem Festlegen von Haltepunkten, der Konsole und der Analyse der Leistung erörtert.
Was soll ich tun, wenn ich auf den Codendruck auf Kleidungsstücke für Front-End-Thermalpapier-Quittungen stoße?
Apr 04, 2025 pm 02:42 PM
Häufig gestellte Fragen und Lösungen für das Ticket-Ticket-Ticket-Ticket in Front-End im Front-End-Entwicklungsdruck ist der Ticketdruck eine häufige Voraussetzung. Viele Entwickler implementieren jedoch ...
10 Möglichkeiten, Ihre JQuery -Leistung sofort zu erhöhen
Mar 11, 2025 am 12:15 AM
Dieser Artikel beschreibt zehn einfache Schritte, um die Leistung Ihres Skripts erheblich zu steigern. Diese Techniken sind unkompliziert und für alle Fähigkeiten anwendbar. Bleiben Sie auf dem Laufenden: Verwenden Sie einen Paketmanager wie NPM mit einem Bundler wie Vite, um sicherzustellen
Verwenden Sie den Pass mit Folge und MySQL
Mar 11, 2025 am 11:04 AM
FECKERIZE ist ein vielversprechender node.js orm. Es kann mit Postgresql, MySQL, Mariadb, SQLite und MSSQL verwendet werden. In diesem Tutorial werden wir die Authentifizierung für Benutzer einer Web -App implementieren. Und wir werden Passport verwenden, die beliebte Authentifizierung Middlew
So bauen Sie einen einfachen JQuery Slider
Mar 11, 2025 am 12:19 AM
In diesem Artikel werden Sie mit der JQuery -Bibliothek ein einfaches Bildkarousel erstellen. Wir werden die BXSLIDER -Bibliothek verwenden, die auf JQuery basiert und viele Konfigurationsoptionen zum Einrichten des Karussells bietet. Heutzutage ist Picture Carousel zu einem Muss auf der Website geworden - ein Bild ist besser als tausend Wörter! Nachdem Sie sich entschieden haben, das Bild -Karussell zu verwenden, ist die nächste Frage, wie Sie es erstellen. Zunächst müssen Sie hochwertige, hochauflösende Bilder sammeln. Als nächstes müssen Sie ein Bildkarousel mit HTML und einem JavaScript -Code erstellen. Es gibt viele Bibliotheken im Web, die Ihnen helfen können, Karussell auf unterschiedliche Weise zu erstellen. Wir werden die Open -Source -BXSLIDER -Bibliothek verwenden. Die BXSLIDER -Bibliothek unterstützt reaktionsschnelles Design, sodass das mit dieser Bibliothek gebaute Karussell an alle angepasst werden kann
