Dieser Artikel beschreibt die Implementierung eines einfachen objektorientierten Farbauswählten durch JS. Teilen Sie es für Ihre Referenz wie folgt weiter:
<! DocType html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transsitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>Untitled Document</title></head><body><script type="text/JavaScript"><!--var colorPicker = Funktion (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", "#00ccff",#993366 ","#CC Cccc ","#ff99cc ","#ffcc99 ","#fff99 ","#ccfcccc ","#ccff99 ","#ccffcc ","#ccfff ","#ccffff ","#99ccff ",#cc9ff", "#fffff"]; 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 = "cursor: pointer; Hintergrund:#ece9d8" mce_style = "Cursor: Zeiger; Hintergrund:#ece9d8">'; // html+= '<tr> <td align = "center" colspan = "8" id = "currentColor" bgcolor = "#ffffffff"> aktuelle Farbe </td> </tr>'; für (i = 0; i <5; i ++) {html+= "<tr>"; für (j = 0; j <8; j ++) {html+= '<td align = "center" style = "Hintergrund:'+this.colorpool [count]+'" mce_style = "Hintergrund:'+this.colorpool [count]+'" ungelektable = "on"> </td>'; zählen ++; } html+= "</tr>"; } html+= '</table>'; this.trigger = document.getElementById (idstr); this.div = document.createelement ('div'); this.div.innerhtml = html; var tds = this.div.getElementsByTagName ('td'); für (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 = 'absolut'; 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 == 'none') {self.show (); false zurückgeben; } else {self.hide (); false zurückgeben; }}}, setColor: function (c) {this.hide (); document.getElementById ('Demo'). style.backgroundcolor = c //proeditor.setColor(C); // Definieren Sie die Funktion selbst, um die Funktion von setColor zu bestimmen}, verstecken: function () {this.div.style.display = 'none'}, show: function () {this.div.style.display = 'block'}} // -> </script> <div> <a href = "#"#"#"#"#"#"mce_href false" id="demo" style="position:absolute;left:200px">Color selection</a></div><script type="text/javascript"><!--function initColorPicker(){ picker = new colorPicker('demo');}// --></script></body></html>Freunde, die an JS -Farbwerkzeugen interessiert sind, können sich auf die Online -Tools dieser Website beziehen :
RGB -Farbkodiergenerator
RGB Farbabfrage Vergleich Tabelle_Color Code Tabelle_Colour English Name Collection
Online -Web -Farb -Matching -Tool
For more information about JavaScript, please check the topics of this site: "Summary of JavaScript switching effects and techniques", "Summary of JavaScript search algorithm skills", "Summary of JavaScript animation effects and techniques", "Summary of JavaScript errors and debugging techniques", "Summary of JavaScript data structures and algorithm skills", "Summary of JavaScript Traversalalgorithmen und -techniken "und" Zusammenfassung der Nutzung von JavaScript -Mathematischen Operationen "
Ich hoffe, dieser Artikel wird für JavaScript -Programme aller hilfreich sein.