正しいパスワードが入力されているかを色で明瞭にする

javascript colors.js


colors.jsをアップデートして、

  • カラーコードからRGBへの変換
  • RGBからカラーコードへの変換
  • RGBからHSVへの変換
  • HSVからRGBへの変換

ができるようになったので、その機能を使ってデモを作った


inputに適当な文字を入れると反応する
上のinputはbackground-color, border-color, colorが変わる
下のinputはborder-bottomを3等分したそれぞれの色が変わる


以下のようなことをしている


ハッシュからRGBを作ってHSVに変換

function toHex(str){
	str = "" + str;
	var len = str.length;
	var n = 0;
	var max = Math.pow(36, len) - 1;
	for(var i = 1; i <= len; ++i){
		n += Math.pow(36, i - 1 ) * parseInt( str.charAt(len - i), 36 );
	}
	return Math.floor( n / max * 255 );
}
//〜略〜
	var color1 = colors.RGBtoHSV({
			r: toHex( hash.slice(0,    4) ),
			g: toHex( hash.slice(4,    8) ),
			b: toHex( hash.slice(8,   12) )
		});
//〜略〜

明度、彩度を調節し、

	color1.v = 0.9;
	color2.v = 0.4;
	color3.v = 0.9;
	color1.s = 0.1;
	color2.s = 0.7;
	color3.s = 0.3;

RGBを経由して

	color1 = colors.HSVtoRGB(color1);
	color2 = colors.HSVtoRGB(color2);
	color3 = colors.HSVtoRGB(color3);

カラーコードに変換して、色を設定する

	$(this).css("background-color", colors.RGBtoCC(color1) )
		   .css("color", colors.RGBtoCC(color2) )
		   .css("border-color", colors.RGBtoCC(color3) );


JSをそのまま貼れないんならガジェットを貼ればいいんだよなーということで、これからはJSのサンプルはできるだけガジェットにして貼ろうと思う