Cet article décrit la mise en œuvre d'un simple sélecteur de couleurs orienté objet par JS. Partagez-le pour votre référence, comme suit:
<! Doctype html public "- // w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns = "http://www.w3.org/1999/xhtml"> <éad> <méta http-equiv = "contenu-type" contenu = "text / html; charset = gb2312" /> <t titre> Document non éteint </ title> </-head> <body> <script type = "text / javascript"> <! function (idstr) {this.colorpool = ["# 000000", "# 993300", "# 333300", "# 003300", "# 003366", "# 000080", "# 333399", "# 3333333", "# 800000", "# ff 6600 "," # 808000 "," # 008080 "," # 0000FF "," # 666699 "," # 808080 "," # ff0000 "," # ff9900 "," # 99cc00 "," # 339966 ", "# 33cccc", "# 3366ff", "# 800080", "# 9999999", "# ff00ff", "# ffcc00", "# fff00", "# 00ff00", "# 00FFFF", "# 00CCF Cccc "," # ff99cc "," # ffcc99 "," # fff99 "," # ccfcccc "," # ccff99 "," # ccffcc "," # ccfff "," # ccffff "," # 99ccff "," # cc99ff "," # fff "]; this.Initialize (idStr);} colorpicker.prototype = {initialize: function (idstr) {var count = 0; var html = ''; var self = this; html + = '<table cellpacing = "5" cellpadding = "0" borderColor = "# 000000" style = "curseur: pointeur; arrière-plan: # eCE9d8" mce_style = "curseur: pointeur; arrière-plan: # eCE9d8">'; // html + = '<tr> <td align = "Center" ColSpan = "8" id = "currentColor" bgColor = "# ffffffff"> Couleur actuelle </td> </tr>'; pour (i = 0; i <5; i ++) {html + = "<tr>"; pour (j = 0; j <8; j ++) {html + = '<td align = "Center" style = "background:' + this.colorpool [count] + '" mce_style = "background:' + this.colorpool [count] + '" nonlelectable = "on"> </ td>'; Count ++; } html + = "</ tr>"; } html + = '</ table>'; this.trigger = document.getElementById (idstr); this.div = document.createElement ('div'); this.div.innerhtml = html; var tds = this.div.getElementsByTagName ('td'); pour (var i = 0, l = tds.length; i <l; i ++) {tds [i] .onclick = function () {self.setColor (this.style.backgroundColor); }} this.div.id = 'myColorPicker'; this.trigger.parentnode.appendChild (this.div); this.div.style.position = 'absolue'; this.div.style.left = this.trigger.offsetleft + 'px' this.div.style.top = (this.trigger.clientheight + this.trigger.offsettop) + 'px'; //this.hide (); this.trigger.onclick = function () {if (self.div.style.display == 'Aucun') {self.show (); retourne false; } else {self.hide (); retourne false; }}}, setColor: function (c) {this.hide (); document.getElementById ('Demo'). Style.BackgroundColor = C //ProEditor.SetColor(c); // Définissez la fonction vous-même pour déterminer la fonction de setColor}, hide: function () {this.div.style.display = 'nothere'}, show: function () {this.div.style.display = 'block'}} // -> </ script> <v> <a href = "#" mce_href = "#" # "sur" initcol FAUX "ID =" Demo "Style =" Position: Absolute; Left: 200px "> Couleur Sélection </a> </div> <Script Type =" Text / JavaScript "> <! - Fonction initColorPicker () {Picker = New ColorPicker ('Demo');} // -> </script> </ body> </html>Les amis qui sont intéressés par les outils de couleur JS peuvent se référer aux outils en ligne de ce site :
Générateur de codage de couleur RVB
Table de comparaison de la requête de couleur RVB_Color Table_colour Collection de noms anglais
Outil de correspondance de couleur Web en ligne
Pour plus d'informations sur JavaScript, veuillez vérifier les sujets de ce site: "Résumé des effets et techniques de commutation JavaScript", "Résumé des effets et techniques de la recherche JavaScript", "Résumé des effets d'animation JavaScript», "Résumé des erreurs Javascript et des techniques de débogage" Algorithmes et techniques de traversée ", et" Résumé de l'utilisation des opérations mathématiques JavaScript "
J'espère que cet article sera utile à la programmation JavaScript de tous.