В этой статье описывается реализация простого объекта-ориентированного селектора цветов JS. Поделитесь этим для вашей ссылки, следующим образом:
<! 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"> <head> <meta http-equiv = "content-type" content = "text/html; charset = gb2312"/> <title> безподобный документ </title> </head> <body> <fcript ytept = "javsccript = javsccripr"! 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", "#00ccff", "#993366", "#cc CCCC ","#FF99CC ","#ffcc99 ","#fff99 ","#ccfccc ","#ccff99 ","#ccffcc ","#ccfff ","#ccffff ","#99cff ","#cc99ff ","#fffff "; this.initialize (idstr);} colorpicker.prototype = {initiaze: function (idstr) {var count = 0; var html = ''; var self = это; html+= '<table cellpacing = "5" cellpadding = "0" bordercolor = "#000000" style = "cursor: pointer; founal:#ece9d8" mce_style = "cursor: pointer; фон:#ece9d8">'; // html+= '<tr> <td align = "center" colspan = "8" id = "currentcolor" bgcolor = "#ffffffff"> current Color </td> </tr>'; for (i = 0; i <5; i ++) {html+= "<tr>"; for (j = 0; j <8; j ++) {html+= '<td align = "center" style = "founke:'+this.colorpool [count]+'" mce_style = "founal:'+this.colorpool [count]+'" не выбирается = "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'); 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 (); вернуть ложь; } else {self.hide (); вернуть ложь; }}}, setColor: function (c) {this.hide (); document.getElementbyId ('demo'). style.backgroundcolor = c //proeditor.setcolor(c); // Определите функцию самостоятельно, чтобы определить функцию setColor}, hide: function () {this.div.style.display = 'none'}, show: function () {this.div.style.display = 'block'}} // -> </script> <div> <a href = "#" mce_href = "#" on " false "id =" demo "style =" Положение: Absolute; слева: 200px "> Выбор цвета </a> </div> <script type =" text/javascript "> <!-function initcolorpicker () {picker = new Colorpicker ('demo');} //-> </script> </body> </html>;} //-> </script> </body> </html>;Друзья, которые заинтересованы в цветных инструментах JS, могут ссылаться на онлайн -инструменты этого сайта :
RGB Color Concoding Generator
Сравнение цветовых запросов RGB table_color code table_colour Английские имена коллекция
Инструмент по сопоставлению веб -цвета онлайн
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 Алгоритмы и методы обхода »и« Сводка использования математических операций JavaScript ».
Я надеюсь, что эта статья будет полезна для каждого программирования JavaScript.