Heim Web-Frontend js-Tutorial Javascript-Methode zur Realisierung von Farb-RGB- und Hexadezimalkonvertierung_Javascript-Fähigkeiten

Javascript-Methode zur Realisierung von Farb-RGB- und Hexadezimalkonvertierung_Javascript-Fähigkeiten

May 16, 2016 pm 04:03 PM
16进制 javascript rgb 转换 颜色

本文实例讲述了Javascript实现颜色rgb与16进制转换的方法。分享给大家供大家参考。具体如下:

使用方法:

1

2

3

Color(12,34,56);

Color("#fff")

Color("#defdcd")

Nach dem Login kopieren

实现代码:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

//颜色转换

var Color = function() {

  if (!(this instanceof Color)) {

   var color = new Color();

   color._init.apply(color, arguments);

   return color;

  }

  if (arguments.length) {

   this._init.apply(this, arguments);

  }

}

//设置get,set方法

var methods = ["red", "green", "blue", "colorValue"];

var defineSetGetMethod = function(fn, methods) {

  var fnPrototype = fn.prototype;

  for (var i = 0; i < methods.length; i++) {

   var methodName = methods[i].charAt(0).toLocaleUpperCase() + methods[i].substring(1);

   fn.prototype['set' + methodName] = new Function("value", "this." + methods[i] + "= value;");

   fn.prototype['get' + methodName] = new Function("return this." + methods[i] + ";");

   fn.prototype['toString'] = new Function('return "rgb("+this.red+","+this.green+","+this.blue+")";');

  }

};

defineSetGetMethod(Color, methods);

//扩展函数的实例方法

var extend = function(fn, option) {

  var fnPrototype = fn.prototype;

  for (var i in option) {

   fnPrototype[i] = option[i];

  }

};

extend(Color, {

  _init : function() {

   if (arguments.length == 3) {

    this.red = arguments[0];

    this.green = arguments[1];

    this.blue = arguments[2];

    this.getColorValue();

   } else {

    var colorValue = arguments[0].replace(/^\#{1}/, "");

    if (colorValue.length == 3) {

     colorValue = colorValue.replace(/(.)/g, '$1$1');

    }

    this.red = parseInt('0x' + colorValue.substring(0, 2), 16);

    this.green = parseInt('0x' + colorValue.substring(2, 4), 16);

    this.blue = parseInt('0x' + colorValue.substring(4), 16);

    this.colorValue = "#" + colorValue;

   }

  },

  getColorValue : function() {

   if (this.colorValue) {

    return this.colorValue;

   }

   var hR = this.red.toString(16);

   var hG = this.green.toString(16);

   var hB = this.blue.toString(16);

   return this.colorValue = "#" + (this.red < 16 &#63; ("0" + hR) : hR) + (this.green < 16 &#63; ("0" + hG) : hG) + (this.blue < 16 &#63; ("0" + hB) : hB);

  }

});

Nach dem Login kopieren

希望本文所述对大家的javascript程序设计有所帮助。

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Praktische Tipps zum Konvertieren von englischen Buchstaben voller Breite in halbbreite Buchstaben Praktische Tipps zum Konvertieren von englischen Buchstaben voller Breite in halbbreite Buchstaben Mar 26, 2024 am 09:54 AM

Praktische Tipps zum Umwandeln von englischen Buchstaben in voller Breite in Formen mit halber Breite. Im modernen Leben kommen wir häufig mit englischen Buchstaben in Kontakt und müssen bei der Verwendung von Computern, Mobiltelefonen und anderen Geräten häufig englische Buchstaben eingeben. Manchmal stoßen wir jedoch auf englische Buchstaben in voller Breite und müssen die Form mit halber Breite verwenden. Wie konvertiert man also englische Buchstaben in voller Breite in die Form mit halber Breite? Hier sind einige praktische Tipps für Sie. Erstens beziehen sich englische Buchstaben und Zahlen in voller Breite auf Zeichen, die in der Eingabemethode eine Position in voller Breite einnehmen, während englische Buchstaben und Zahlen in halber Breite eine Position in voller Breite einnehmen.

Golang-Zeitverarbeitung: So konvertieren Sie Zeitstempel in Golang in einen String Golang-Zeitverarbeitung: So konvertieren Sie Zeitstempel in Golang in einen String Feb 24, 2024 pm 10:42 PM

Golang-Zeitkonvertierung: So konvertieren Sie einen Zeitstempel in einen String. In Golang ist die Zeitoperation eine der häufigsten Operationen. Manchmal müssen wir den Zeitstempel zur einfacheren Anzeige oder Speicherung in eine Zeichenfolge umwandeln. In diesem Artikel wird erläutert, wie Sie mit Golang Zeitstempel in Zeichenfolgen konvertieren, und es werden spezifische Codebeispiele bereitgestellt. 1. Konvertierung von Zeitstempeln und Zeichenfolgen In Golang werden Zeitstempel normalerweise in Form von Ganzzahlen ausgedrückt, die die Anzahl der Sekunden vom 1. Januar 1970 bis zum aktuellen Zeitpunkt darstellen. Die Zeichenfolge ist

Detaillierte Erläuterung der Implementierungsmethode zur Konvertierung von PHP-Monaten in englische Monate Detaillierte Erläuterung der Implementierungsmethode zur Konvertierung von PHP-Monaten in englische Monate Mar 21, 2024 pm 06:45 PM

In diesem Artikel wird detailliert beschrieben, wie Monate in PHP in englische Monate konvertiert werden, und es werden spezifische Codebeispiele gegeben. In der PHP-Entwicklung müssen wir manchmal digitale Monate in englische Monate konvertieren, was in einigen Datumsverarbeitungs- oder Datenanzeigeszenarien sehr praktisch ist. Die Implementierungsprinzipien, spezifischen Codebeispiele und Vorsichtsmaßnahmen werden im Folgenden ausführlich erläutert. 1. Implementierungsprinzip In PHP können Sie digitale Monate mithilfe der DateTime-Klasse und der Formatmethode in englische Monate konvertieren. Datum

So konvertieren Sie QQ-Musik in das MP3-Format. Konvertieren Sie QQ-Musik auf dem Mobiltelefon in das MP3-Format So konvertieren Sie QQ-Musik in das MP3-Format. Konvertieren Sie QQ-Musik auf dem Mobiltelefon in das MP3-Format Mar 21, 2024 pm 01:21 PM

Mit QQ Music kann jeder Filme genießen und sich jeden Tag langweilen. Eine große Anzahl hochwertiger Songs steht zum Anhören zur Verfügung Wenn Sie sie das nächste Mal anhören, benötigen Sie keine Internetverbindung. Die hier heruntergeladenen Songs sind nicht im MP3-Format und können nicht auf anderen Plattformen verwendet werden. Daher gibt es keine Möglichkeit, sie erneut anzuhören Viele Freunde möchten die Songs ins MP3-Format konvertieren. Hier erklärt der Herausgeber, dass Sie Methoden bereitstellen, damit jeder sie verwenden kann! 1. Öffnen Sie QQ Music auf Ihrem Computer, klicken Sie auf die Schaltfläche [Hauptmenü] in der oberen rechten Ecke, klicken Sie auf [Audiotranskodierung], wählen Sie die Option [Song hinzufügen] und fügen Sie die Songs hinzu, die konvertiert werden müssen. 2. Nach dem Hinzufügen Um die Songs anzuzeigen, klicken Sie, um „In [mp3] konvertieren“ auszuwählen.

Vivos neuer Speicher der X100-Serie, Farbbelichtung: Alle Serien beginnen bei 12+256 GB Vivos neuer Speicher der X100-Serie, Farbbelichtung: Alle Serien beginnen bei 12+256 GB May 06, 2024 pm 03:58 PM

Laut Nachrichten vom 6. Mai gab vivo heute offiziell bekannt, dass die neue vivo X100-Serie am 13. Mai um 19:00 Uhr offiziell veröffentlicht wird. Es wird davon ausgegangen, dass auf dieser Konferenz voraussichtlich drei Modelle, vivoX100s, vivoX100sPro und vivoX100Ultra, sowie die von vivo selbst entwickelte Bildgebungsmarke BlueImage Blueprint-Bildgebungstechnologie vorgestellt werden. Der digitale Blogger „Digital Chat Station“ hat heute auch die offiziellen Renderings, Speicherspezifikationen und Farbabstimmung dieser drei Modelle veröffentlicht. Darunter verfügt das X100s über ein gerades Bildschirmdesign, während das X100sPro und das X100Ultra über ein gebogenes Bildschirmdesign verfügen. Der Blogger enthüllte, dass das vivoX100s in vier Farben erhältlich ist: Schwarz, Titan, Cyan und Weiß. Die Speicherspezifikationen

So konvertieren Sie englische Buchstaben voller Breite in Buchstaben halber Breite So konvertieren Sie englische Buchstaben voller Breite in Buchstaben halber Breite Mar 25, 2024 pm 02:45 PM

So konvertieren Sie englische Buchstaben voller Breite in Buchstaben halber Breite. Im täglichen Leben und bei der Arbeit stoßen wir manchmal auf Situationen, in denen wir englische Buchstaben voller Breite in Buchstaben halber Breite umwandeln müssen, z. B. beim Eingeben von Computerkennwörtern, beim Bearbeiten von Dokumenten usw Entwerfen von Layouts. Englische Buchstaben und Zahlen in voller Breite beziehen sich auf Zeichen mit der gleichen Breite wie chinesische Schriftzeichen, während sich englische Buchstaben in halber Breite auf Zeichen mit einer schmaleren Breite beziehen. Im tatsächlichen Betrieb müssen wir einige einfache Methoden beherrschen, um englische Buchstaben voller Breite in Buchstaben halber Breite umzuwandeln, damit wir Text und Zahlen bequemer verarbeiten können. 1. Englische Buchstaben voller Breite und englische Buchstaben halber Breite

Wissen Sie, wie man die Farbe der WPS-Dokumenttabelle einstellt? Wissen Sie, wie man die Farbe der WPS-Dokumenttabelle einstellt? Mar 20, 2024 am 08:19 AM

Wenn wir die Tabellenfarben in den WPS-Dokumenten anderer Leute sehen, sind die Effekte farbenfroh und schön; wir haben jedoch nur eintöniges Schwarz. Wenn man die Tabelle mit Farben füllen muss, werden das meiner Meinung nach viele Schüler tun. Wenn Sie jedoch die Farbe der Tabelle im WPS-Dokument China festlegen möchten, wird dies für viele Studenten sicherlich verwirrend sein! Lassen Sie uns heute lernen, wie Sie die Farbe der WPS-Dokumententabelle festlegen. Ich habe ein Dokument zusammengestellt, von dem ich hoffe, dass es für alle hilfreich ist. Die Schritte sind wie folgt: 1. Wir müssen eine Tabelle im WPS-Dokument zeichnen und mit der rechten Maustaste auf die Tabelle klicken, in der die Linienfarbe geändert werden soll. 2. Als nächstes klicken Sie mit der Maus auf die [rechte Maustaste] auf der Tabelle. Im Popup-Menü finden Sie [Rand und Schattierung]. 3. Zu diesem Zeitpunkt wird die Option [Rand und Schattierung] geöffnet.

PHP-Tutorial: So konvertieren Sie den Typ int in einen String PHP-Tutorial: So konvertieren Sie den Typ int in einen String Mar 27, 2024 pm 06:03 PM

PHP-Tutorial: So konvertieren Sie den Int-Typ in einen String. In PHP ist das Konvertieren von Ganzzahldaten in einen String ein häufiger Vorgang. In diesem Tutorial erfahren Sie, wie Sie die in PHP integrierten Funktionen verwenden, um den Typ int in einen String zu konvertieren, und stellen gleichzeitig spezifische Codebeispiele bereit. Cast verwenden: In PHP können Sie Cast verwenden, um ganzzahlige Daten in einen String umzuwandeln. Diese Methode ist sehr einfach. Sie müssen lediglich (string) vor den ganzzahligen Daten hinzufügen, um sie in einen String umzuwandeln. Unten finden Sie einen einfachen Beispielcode

See all articles