Este artículo describe la implementación de un simple selector de color orientado a objetos por JS. Compártelo para su referencia, como sigue:
< xmlns = "http://www.w3.org/1999/xhtml"> <fead> <meta http-equiv = "content-type" content = "text/html; charset = gb2312"/> <title> Documento hasta el título </title> </head> <fody <body <body tipo = "text/jav"> function (idstr) {this.colorpool = ["#000000", "#993300", "#3333300", "#0033300", "#0033366", "#000080", "#333399", "#33333333", "#800000", " 6600 ","#808000 ","#008080 ","#0000ff ","#6666699 ","#808080 ","#FF0000 ","#FF9900 ","#99CC00 ","#339966 ",", ", ""#33CCCC ","#3366ff ","#800080 ","#99999999 ","#ff00ff ","#ffcc00 ","#fff00 ","#00ff00 ","#00ffff ","#00ccff ","#993366 ","#cc Cccc ","#ff99cc ","#ffcc99 ","#fff99 ","#ccfcccc ","#ccff99 ","#ccffcc ","#ccfff ","#ccffff ","#99ccff ","#cc99ff ","#fffff "]; this.initialize (idstr);} colorpicker.prototype = {inicialize: function (idstr) {var count = 0; var html = ''; var self = this; html+= '<table cellPacing = "5" cellPadding = "0" borderColor = "#000000" style = "cursor: pointer; fondos:#ece9d8" mce_style = "cursor: puntero; fondo:#ece9d8">'; // html+= '<tr> <td align = "center" colspan = "8" id = "currentColor" bgcolor = "#ffffffff"> Color actual </td> </tr>'; para (i = 0; i <5; i ++) {html+= "<tr>"; para (j = 0; j <8; j ++) {html+= '<td align = "center" style = "fondo:'+this.colorpool [count]+'" mce_style = "fondo:'+this.colorPool [count]+'" sin selección = "en"> </td>'; contar ++; } html+= "</tr>"; } html+= '</table>'; this.Rigger = document.getElementById (IDSTR); this.div = document.createElement ('div'); this.div.innerhtml = html; var tds = this.div.getElementsBytagName ('td'); for (var i = 0, l = tds.length; i <l; i ++) {tds [i] .Onclick = function () {self.setColor (this.style.backgroundcolor); }} this.div.id = 'mycolorpicker'; this.rigger.parentnode.appendChild (this.div); this.div.style.position = 'Absolute'; this.div.style.left = this.rigger.offsetleft + 'px' this.div.style.top = (this.trigger.clientHeight + this.trigger.offsettop) + 'px'; //this.hide (); this.Rigger.onClick = function () {if (self.div.style.display == 'none') {self.show (); devolver falso; } else {self.hide (); devolver falso; }}}, setColor: function (c) {this.hide (); document.getElementById ('demo'). style.backgroundcolor = c //proeditor.setColor(c); // Defina la función usted mismo para determinar la función de setColor}, hide: function () {this.div.style.display = 'none'}, show: function () {this.div.style.display = 'block'}} // ->> </script> <div> <a href = "#" mce_href = "#"#"#" "itcLick" Falso "id =" Demo "Style =" Posición: Absolute; Izquierda: 200px "> Selección de color </a> </div> <script type =" text/javaScript "> <!-function initColorPicker () {picker = new ColorPicker ('Demo');} //-> </script> </body> </html>Los amigos interesados en las herramientas de color JS pueden referirse a las herramientas en línea de este sitio :
Generador de codificación de color RGB
Table de comparación de consultas de color RGB Table_color table_colour colección de nombres en inglés
Herramienta de coincidencia de color web en línea
Para obtener más información sobre JavaScript, consulte los temas de este sitio: "Resumen de los efectos y técnicas de conmutación de JavaScript", "Resumen de las habilidades de algoritmo de búsqueda de JavaScript", "Resumen de los efectos de animación de JavaScript y las técnicas", "Resumen de los errores de JavaScript y la eliminación de las tecnologías", "Summary of JavaScript Data Structures and Alggorithm Skills of JaVaScripts of JaVaScripts of JavaScripts of JaVaScripts de JaVaScripts de JaVaScripción Algoritmos y técnicas de traversal ", y" Resumen del uso de operaciones matemáticas de JavaScript "
Espero que este artículo sea útil para la programación de JavaScript de todos.