この記事では、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> untitled document < 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"、 "＃999999"、 "＃ff00ff"、 "＃ffcc00"、 "＃fff00"、 "＃00ff00"、 "＃00ffff"、 "＃00ccff"、 "＃99366"、 "＃cc cccc "、"＃ff99cc "、"＃ffcc99 "、"＃fff99 "、"＃ccfcccc "、"＃ccff99 "、"＃ccffcc "、"＃ccfff "、"＃ccffff "、"＃99ccff "、"＃cc99ff "、"＃fffff "]; this.initialize（idstr）;} colorpicker.prototype = {initialize：function（idstr）{var count = 0; var html = ''; var self = this; html+= '<table cellpacing = "5" cellpadding = "0" bordercolor = "＃000000" style = "cursor：pointer; background：＃ece9d8" mce_style = "cursor; // html+= '<tr> <td align = "center" colspan = "8" id = "currentcolor" bgcolor = "＃fffffffff"> current color </td> </tr>'; for（i = 0; i <5; i ++）{html+= "<tr>"; for（j = 0; j <8; j ++）{html+= '<td align = "center" style = "background：'+this.colorpool [count]+'" background：'+this.colorpool [count]+'"unselectable =" 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（）; falseを返します。 } else {self.hide（）; falseを返します。 }}}、setColor：function（c）{this.hide（）; document.getElementById（ 'demo'）。style.backgroundcolor= c //proeditor.setcolor(c）; // setcolorの関数を決定するために関数を自分で定義します}、非表示：function（）{this.div.style.display = 'none'}、show：function（）{this.div.style.display = 'block'}} // - > </script> <a href = "＃" mce_href = "＃" onclick = "initcolorpicker（）; return false" id = "demo" style = "position：absolute; left：200px"> color selection </a> </div> <script type = "text/javascript"> <！ - function initcolopicker（）{picker = new colorpicker（ 'demo'）;}JSカラーツールに興味のある友人は、このサイトのオンラインツールを参照できます。
RGBカラーエンコーディングジェネレーター
RGBカラークエリ比較テーブル_colorコードテーブル_colour英語名コレクション
オンラインWebカラーマッチングツール
JavaScriptの詳細については、このサイトのトピックを確認してください：「JavaScriptの切り替え効果とテクニックの要約」、「JavaScript検索アルゴリズムスキルの概要」、「JavaScriptアニメーション効果とテクニックの要約」、JavaScriptエラーとデバッグテクニックの要約「JavaScript Data of Javascript Datarictures」の概要」、「Javascript Data clutture」の要約「概要」、「概要」、「概要」、「概要」、「要約」トラバーサルアルゴリズムとテクニック」、および「JavaScriptの数学的操作の使用法の要約」
この記事がみんなのJavaScriptプログラミングに役立つことを願っています。