jsdoitで作ってみました。
http://jsdo.it/utun001/yn2f
Javascript部分はこんな感じ。
lang
1var halfColorNum = (255 * 3) / 2;
2$(document).ready(function(){
3 $(window).keyup(function(e){
4 $('body').css("backgroundColor", "#"+$('#backgroundcolor').val());
5 var buf = $('body').css("backgroundColor").toString();
6 var bgcArray = $('body').css("backgroundColor").toString().replace("rgb(","").replace(")","").split(",");
7 var sumColorNum = 0;
8 bgcArray.forEach(function(val){
9 sumColorNum += parseInt(val, 10);
10 });
11 if(halfColorNum > sumColorNum){
12 $('body').css({"color": "#FFFFFF"});
13 } else {
14 $('body').css({"color": "#000000"});
15 }
16 });
17});
単純にkeyupイベント時にinputから文字列を読み込んで、background-colorへ設定。
background-colorのRGBをそれぞれ足して、数値が「382.5」より大きいか、小さいかで文字色を判断しています。
尚、jQueryを利用しているのでご注意ください。
以上、ご参考になれば幸いです。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/01/09 10:05
2015/01/14 14:18