「jsで反対色の生成」を別ウィンドウで開く
各種サンプルとソース一覧 | PCスキルの小技・忘却防止メモ |

jsで反対色の生成

  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4. <meta charset="UTF-8">
  5. <script type="text/javascript" src="jquery-1.5.1.min.js"></script>
  6. <script type="text/javascript" src="knockout-2.1.0beta.js"></script>
  7. <title>jsで反対色の生成</title>
  8. </head>
  9. <body>
  10. <script type="text/javascript"><!--
  11.   $(document).ready(function () {
  12.     ko.applyBindings(new viewModel());
  13.   });
  15.   // =========================================================
  16.   // カラーコードかチェックする
  17.   // 戻り値は真・偽
  18.   function checkColorCode(ColorCode)
  19.   {
  20.     // 「値がない」or「#で始まらないとき」は終了
  21.     if (ColorCode == undefined || ColorCode.match(/^[#]/) == null)
  22.     {
  23.       return false;
  24.     } 
  25.     
  26.     // 「#を取って6文字」or「カラーコードが0～9、A～Fだけ」かチェック
  27.     noMark = ColorCode.replace(/^[#]/, "");
  28.     if (noMark.length != 6 || noMark.match(/^[0-9A-F]*$/i) == null)
  29.     {
  30.       return false;
  31.     }
  32.     
  33.     return true;
  34.   }
  36.   // =========================================================
  37.   // 16進数のカラーコードをRGBをキーにした配列に変換
  38.   function ConvertToColorAryFrom16(ColorCode)
  39.   {
  40.     // #からはじまる色コードかチェック
  41.     if (checkColorCode(ColorCode) == false)
  42.     {
  43.       return false;
  44.     } 
  45.     
  46.     // 1番目から3文字目までがR
  47.     ConvertColor = new Array;
  48.     ConvertColor["R"] = ColorCode.substring(1, 3);
  49.     ConvertColor["G"] = ColorCode.substring(3, 5);
  50.     ConvertColor["B"] = ColorCode.substring(5);
  51.     
  52.     return ConvertColor;
  53.   }
  55.   // 16進数のカラーコードを10進数にする
  56.   // 戻り値はRGBをキーにした配列
  57.   function ConvertColorCodeTo10From16(ColorCodeAry)
  58.   {
  59.     // 1番目から3文字目までがR
  60.     ConvertColor = new Array;
  61.     ConvertColor["R"] = parseInt(ColorCodeAry["R"], 16);
  62.     ConvertColor["G"] = parseInt(ColorCodeAry["G"], 16);
  63.     ConvertColor["B"] = parseInt(ColorCodeAry["B"], 16);
  64.     
  65.     return ConvertColor;
  66.   }
  68.   // 10進数のカラーコードを16進数にする
  69.   // 戻り値はRGBをキーにした配列
  70.   function ConvertColorCodeTo16From10(ColorCode)
  71.   {
  72.     // 1番目から3文字目までがR
  73.     ConvertColor = new Array;
  74.     ConvertColor["R"] = ColorCode["R"].toString(16);
  75.     ConvertColor["G"] = ColorCode["G"].toString(16);
  76.     ConvertColor["B"] = ColorCode["B"].toString(16);
  77.     
  78.     return ConvertColor;
  79.   }
  81.   // 10進数のカラーコードを格納した配列
  82.   // 戻り値はRGBをキーにした配列
  83.   function ConvertReverseColor(ColorArray)
  84.   {
  85.     ReverseColor = new Array;
  86.     ReverseColor["R"] = Math.round(255 - ColorArray["R"]);
  87.     ReverseColor["G"] = Math.round(255 - ColorArray["G"]);
  88.     ReverseColor["B"] = Math.round(255 - ColorArray["B"]);
  89.     return ReverseColor;
  90.   }
  92.   // 16進数のカラーコードを格納した配列を#xxxxxxにする
  93.   // 戻り値は#xxxxxxといったカラーコード（文字列）
  94.   function ConvertColorCode(ColorArray)
  95.   {
  96.     ColorCode = "#"
  97.     
  98.     // Rを追加
  99.     if (ColorArray["R"].length == 1)
  100.     {
  101.       ColorCode += "0";
  102.     }
  103.     ColorCode += ColorArray["R"];
  104.     
  105.     // Gを追加
  106.     if (ColorArray["G"].length == 1)
  107.     {
  108.       ColorCode += "0";
  109.     }
  110.     ColorCode += ColorArray["G"];
  111.     
  112.     // Bを追加
  113.     if (ColorArray["B"].length == 1)
  114.     {
  115.       ColorCode += "0";
  116.     }
  117.     ColorCode += ColorArray["B"];
  118.     
  119.     return ColorCode;
  120.   }
  122.   /* ================================================
  123.    ▼knockout.js
  124.   ================================================ */
  125.   function viewModel() {
  126.     var self = this;
  127.     
  128.     self.inputColor = ko.observable();
  129.     
  130.     // 文字色
  131.     self.outputColor = ko.computed( function()
  132.     {
  133.       if ( checkColorCode(self.inputColor()) == false ) 
  134.       {
  135.         return "";
  136.       }
  137.       return self.inputColor();
  138.     }, this);
  140.     // 背景色
  141.     self.backColor = ko.computed( function()
  142.     {
  143.       if (self.outputColor() == false)
  144.       {
  145.         return "";
  146.       }
  147.       
  148.       ColorAry16 = ConvertToColorAryFrom16( self.outputColor() );
  149.       ColorAry10 = ConvertColorCodeTo10From16( ColorAry16 );
  150.       ReverseAry10 = ConvertReverseColor( ColorAry10 );
  151.       ReverseAry16 = ConvertColorCodeTo16From10( ReverseAry10 );
  152.       
  153.       return ConvertColorCode(ReverseAry16);
  154.     }, this);
  155.     
  156.   }
  158. // --></script>
  160. <h1>jsで反対色の生成：表示部は「knockout.js」</h1>
  161. <h2>「#000000」ってな感じで#から始まる6ケタの色コードを入力</h2>
  162. <div>
  163.   色コード：<input type="text" data-bind="value: inputColor" /><br />
  165.   <div style="margin-top:0.5em;padding:10px;" data-bind="visible: outputColor, style: {color: outputColor, backgroundColor: backColor}">
  166.   文字色：<span data-bind="text: outputColor"></span>、
  167.   背景色（反対色）：<span data-bind="text: backColor"></span>
  168.   </div>
  169. </div>
  171. <div style="font-size:10pt;text-align:right;margin-top:0.5em;">
  172. <a href="//tips.recatnap.info/" target="_top">PCスキルの小技・忘却防止メモ</a> -
  173. <a href="//tips.recatnap.info/wiki/" target="_top">PCスキルの小技・忘却防止メモのまとめ（wiki）</a>
  174. </div>
  176. <div style="font-size:10pt;text-align:center;margin-top:0.5em;padding:0.5em;border-top:1px solid #ccc;">
  177. Copyright &copy; 2009 by PCスキルの小技・忘却防止メモ. All rights reserved.
  178. </div>
  180. </body>
  181. </html>