Artikel ini menjelaskan implementasi pemilih warna yang berorientasi objek sederhana oleh JS. Bagikan untuk referensi Anda, sebagai berikut:
<! Doctype html public "-// w3c // dtd xhtml 1.0 transisi // 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>Untitled Document</title></head><body><script type="text/JavaScript"><!--var colorPicker = 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 ","#ccfcccc ","#ccff99 ","#ccffcc ","#ccfff ","#ccffff ","#99ccff ","#cc99f ","#fffff ","#99ccff ","#cc99f ","#fffff "; this.initialize (idstr);} colorpicker.prototype = {initialize: function (idstr) {var count = 0; var html = ''; var self = ini; html+= '<tabel cellpacing = "5" cellPadding = "0" boundolor = "#000000" style = "kursor: pointer; latar belakang:#ece9d8" mce_style = "kursor: pointer; latar belakang:#ece9d8">'; // html+= '<tr> <td align = "center" colspan = "8" id = "currentColor" bgcolor = "#ffffffff"> warna saat ini </td> </tr>'; untuk (i = 0; i <5; i ++) {html+= "<tr>"; untuk (j = 0; j <8; j ++) {html+= '<td align = "center" style = "latar belakang:'+this.colorpool [count]+'" mce_style = "latar belakang:'+this.colorpool [hitung]+'" tidak dipilih = "on"> </td>'; Count ++; } html+= "</tr>"; } html+= '</boable>'; this.trigger = document.getElementById (idstr); this.div = document.createElement ('div'); this.div.innerHtml = html; var tds = this.div.getElementsbyTagname ('td'); untuk (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 (); mengembalikan false; } else {self.hide (); mengembalikan false; }}}, setColor: function (c) {this.hide (); document.geteLementById ('demo'). style.backgroundColor = c //proeditor.setColor(c); // Tentukan fungsi sendiri untuk menentukan fungsi setColor}, hide: function () {this.div.style.display = 'none'}, show: function () {this.div.style.display = 'block'}} // -> </script> <Div> <a href = "#" mCe = "(" mCe = ""#"" false "id =" demo "style =" position: absolute; left: 200px "> seleksi warna </a> </div> <script type =" text/javascript "> <!-function initcolorpicker () {picker = new colorpicker ('demo');} //-> </script </body> </html> </html>Teman yang tertarik dengan alat warna JS dapat merujuk pada alat online situs ini :
Generator penyandian warna RGB
RGB Color Query Perbandingan Table_color Code Table_Colour Koleksi Nama Bahasa Inggris
Alat pencocokan warna web online
Untuk informasi lebih lanjut tentang JavaScript, silakan periksa topik -topik situs ini: "Ringkasan Efek dan Teknik Beralih JavaScript", "Ringkasan Keterampilan Algoritma Pencarian JavaScript", "Ringkasan Efek Animasi JavaScript dan Teknik dari Javascrips Struktur dan Ringkasan Javascript" Ringkasan Javascript "Ringkasan Javascrip" Ringkasan Javascrip "Ringkasan Javascrip", "Ringkasan Javascript", "Ringkasan Javascript" Ringkasan JavaScript " Algoritma dan Teknik Traversal ", dan" Ringkasan Penggunaan Operasi Matematika JavaScript "
Saya harap artikel ini akan membantu pemrograman JavaScript semua orang.