บทความนี้อธิบายถึงการใช้ตัวเลือกสีที่เน้นวัตถุอย่างง่ายโดย 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> ฟังก์ชัน (IDSTR) {this.ColorPool = ["#000000", "#993300", "#333300", "#003300", "#003366", "#000080", "#333399", "#33333333", "#800000" 6600 ","#808000 ","#008080 ","#0000ff ","#666699 ","#808080 ","#FF0000 ","#FF9900 ","#99cc00 ","#339966 " "#33CCCC", "#3366FF", "#800080", "#9999999", "#FF00FF", "#FFCC00", "#FFF00", "#00FF00", "#00FFFF", "#00CCFF" cccc ","#ff99cc ","#ffcc99 ","#fff99 ","#ccfcccc ","#ccff99 ","#ccffcc ","#ccfff ","#ccffff ","#99ccff " this.initialize (idstr);} colorpicker.prototype = {เริ่มต้น: ฟังก์ชั่น (idstr) {var count = 0; var html = ''; var self = this; html+= '<table cellpacing = "5" cellpadding = "0" bordercolor = "#000000" style = "เคอร์เซอร์: ตัวชี้; พื้นหลัง:#ece9d8" mce_style = "เคอร์เซอร์: ตัวชี้; พื้นหลัง:#ece9d8">';; // html+= '<tr> <td align = "center" colspan = "8" id = "collancolor" bgcolor = "#ffffffff"> สีปัจจุบัน </td> </tr>'; สำหรับ (i = 0; i <5; i ++) {html+= "<tr>"; สำหรับ (j = 0; j <8; j ++) {html+= '<td align = "center" style = "พื้นหลัง:'+this.colorpool [นับ]+'" mce_style = "พื้นหลัง:'+this.colorpool [นับ]+' นับ ++; } html+= "</tr>"; } html+= '</table>'; this.trigger = document.getElementById (IDSTR); this.div = document.createElement ('div'); this.div.innerhtml = html; var tds = this.div.getElementsByTagname ('td'); สำหรับ (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.offsetp) + 'px'; //this.hide (); this.trigger.onclick = function () {ถ้า (self.div.style.display == 'ไม่มี') {self.show (); กลับเท็จ; } else {self.hide (); กลับเท็จ; }}}, setColor: function (c) {this.hide (); document.getElementById ('demo'). style.backgroundColor = c //proeditor.setColor(C); // กำหนดฟังก์ชั่นด้วยตัวเองเพื่อกำหนดฟังก์ชั่นของ setColor}, ซ่อน: ฟังก์ชั่น () {this.div.style.display = 'none'}, แสดง: function () {this.div.style.display = 'block'}} // -> onclick = "initcolorpicker (); return false" id = "demo" style = "ตำแหน่ง: Absolute; left: 200px"> การเลือกสี </a> </div> <script type = "text/javascript"> <!เพื่อนที่สนใจเครื่องมือสี JS สามารถอ้างถึงเครื่องมือออนไลน์ของเว็บไซต์นี้ :
เครื่องกำเนิดการเข้ารหัสสี RGB
RGB Color Query Comparison Table_Color Code Table_Colour Name Name Collection
เครื่องมือจับคู่สีเว็บออนไลน์
สำหรับข้อมูลเพิ่มเติมเกี่ยวกับ JavaScript โปรดตรวจสอบหัวข้อของไซต์นี้: "สรุปผลการสลับและเทคนิคการสลับ JavaScript", "สรุปทักษะอัลกอริทึมการค้นหา JavaScript", "สรุปผลการตรวจสอบและเทคนิคการสรุปของ JavaScript อัลกอริทึมและเทคนิคการสำรวจทราเวอร์แซ
ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับการเขียนโปรแกรม JavaScript ของทุกคน