Este artigo descreve a implementação de um seletor de cores simples orientado a objetos pelo JS. Compartilhe -o para sua referência, como segue:
<! xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html; charset = gb2312"/> <title> título </title> </head; function (idstr) {this.colorpool = Também 6600 ","#808000 ","#008080 ","#0000FF ","#666699 ","#808080 ","#ff0000 ","#ff9900 ","#99cc00 ","#339966 ", "#33CCCC", "#3366FF", "#800080", "#99999999", "#ff00ff", "#ffcc00", "#fff00", "#00ff00", "#00ff", "#00 00ccff", "00ff00", "#00ff", "#00 00", "00ff00", "00ff", "00ccff", "00ff00", "00ff", "00ccff" 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+= '<tabela CellPacing = "5" CellPadding = "0" borderColor = "#000000" style = "Cursor: ponteiro; fundo:#e9d8" mce_style = "Cursor: ponteiro; fundo:#eCe9D8">'; // html+= '<tr> <td align = "Center" colspan = "8" id = "currentColor" bgcolor = "#ffffffff"> cor atual </td> </tr>'; for (i = 0; i <5; i ++) {html+= "<tr>"; para (j = 0; j <8; j ++) {html+= '<td align = "center" style = "background:'+this.colorpool [count]+'" mce_style = "Antecedentes:'+this.colorpool [count]+'" unselectable = "em"> </td>'; contagem ++; } html+= "</tr>"; } html+= '</tabela' '; this.Trigger = 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.trigger.parentnode.appendChild (this.div); this.div.style.Position = 'Absolute'; 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 (); retornar falso; } else {self.hide (); retornar falso; }}}, setColor: function (c) {this.hide (); document.getElementById ('Demo'). style.backgroundColor = c //proDitor.setColor(c); //Define the function yourself to determine the function of setColor}, hide : function(){ this.div.style.display = 'none' }, show : function(){ this.div.style.display = 'block' }}// --></script><div ><a href="#" mce_href="#" OnClick = "initcolorpicker (); retorna false" id = "Demo" style = "Posição: absoluto; esquerda: 200px"> seleção de cores </a> </div> <script type = "text/javascript"> <!-functcolorpicker () {picker = new Colorpicker ('Demo');Amigos interessados em ferramentas de cores JS podem se referir às ferramentas on -line deste site :
Gerador de codificação de cores rgb
RGB COLORE COMERY COMPARISON TABLE_COLOR CÓDIGO TABLE_COLOUR ENGONER
Ferramenta de correspondência de cor on -line na web
Para obter mais informações sobre JavaScript, verifique os tópicos deste site: "Resumo dos efeitos e técnicas de comutação de JavaScript", "Resumo das habilidades de algoritmo de pesquisa de JavaScript", "Resumo de Javascript Animation Effects and Techmary" Summary Strestrening DataScript e depuração e técnicas "," Summary "Summary Strestring DataScript DataScript e depurging Techniques", "Summar Algoritmos e técnicas de travessia "e" Resumo do uso de operações matemáticas de JavaScript "
Espero que este artigo seja útil para a programação JavaScript de todos.