background-colorを16進数で1ずつ増加させる

jQuery

今回のゴール

ボタンをクリックしたときに、background-colorの値が１ずつ増加していく。
というのをjQueryを使用して行っていきます。



使用するプラグイン

RGB color parser in JavaScript / Stoyan's phpied.com
こちらのRBGcolorを使用します。
16進数とrbgを簡単に変換できるプラグインです。

ソース
<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>background-colorを16進数で1ずつ増加させる</title>
	<style>
		body{
		  background-color: #000000;
		}		
	</style>
	<script src="http:////cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
	<script src="http://www.phpied.com/files/rgbcolor/rgbcolor.js" type="text/javascript"></script>
	<script>
		$(function(){
			$(".button").click(function () {

			  var bg_color = $("body").css("background-color");
			  var color_rgb = new RGBColor(bg_color);
			  if(color_rgb.ok){
			   var color_16 = color_rgb.toHex(); 
			  }

			  bg = color_16.slice(1, 7);
			  bg_num = parseInt(bg, 16);
			  bg_num = bg_num + 1;
			  bg_str = bg_num.toString(16);
			  background_color = ("000000" + bg_str).slice(-6);
			  
			  $('body').css("background-color", '#' + background_color);
			  
			});
		});
	</script>
</head>
<body>
  <div class="button">
  	<input type="button" value="test"></input>
  </div>
</body>
</html>
解説

var bg_color = $("body").css("background-color");
var color_rgb = new RGBColor(bg_color);
if(color_rgb.ok){
var color_16 = color_rgb.toHex();
}

bodyタグのbackground-colorを取得しています。
次の行で、bg_colorにrbgの色指定か、カラーコードか直接色指定されているかを判断しています。
もし色が入っていれば.okにtrueが入るので、background-colorを16進数で表示します。

var bg = color_16.slice(1, 7);
var bg_num = parseInt(bg, 16);
bg_num = bg_num + 1;
var bg_str = bg_num.toString(16);
var _color = ("000000" + bg_str).slice(-6);

$('body').css("background-color", '#' + _color);

16進数にしたカラーコードを数値の部分だけにします。 #000000 => 000000
その後、文字列であるbgを16進数の数値に変換して1足します。
ここで足した際に、000000+1=1となってしまうので、
足した後に再び文字列に変換をして、頭に000000をつけて右側６つを取得します。 000000123 => 000123
そしてbackground-colorのスタイルに入れれば完了です。