色の生成
|
上のBoxの色が変化します。
|
- 先頭の"0x"は16進数を表す記号
- 0x000000は黒色。そこで0xrr0000のrrの部分を01-→255まで順増していけば赤色に変化していく。例えば、0x010000*65 は0x650000に、0x010000*235は0xEB0000なる。他の色でも同様。
- 0xffffffが白色。この白から赤色にするには 0xffffff-0x00ffff のように減算をする。
|
上のBoxの色が変化します。
|
Sample Source......................................................................>>>
<script language="JavaScript"><!--
var num,dec,i;
function Color1(c){
i = 0;
if(c == "bw")num = 0x010101; //黒から白色へ
else if(c == "by")num = 0x010100; //黒から黄色へ
else if(c == "br")num = 0x010000; //黒から赤色へ
else if(c == "ba")num = 0x000101; //黒から水色へ
else if(c == "bb")num = 0x000001; //黒から青色へ
else if(c == "bg")num = 0x000100; //黒から緑色へ
else if(c == "bm")num = 0x010001; //黒から紫色へ
Change1();
}
function Color2(c){
i = 0;
if(c == "wb")dec = 0x010101; //白から黒色へ
else if(c == "wy")dec = 0x000001; //白から黄色へ
else if(c == "wr")dec = 0x000101; //白から赤色へ
else if(c == "wa")dec = 0x010000; //白から水色へ
else if(c == "wbu")dec = 0x010100; //白から青色へ
else if(c == "wg")dec = 0x010001; //白から緑色へ
else if(c == "wm")dec = 0x000100; //白から紫色へ
Change2();
}
function Change1(){ //黒色から変化する場合
if(i <= 255){
dv.style.backgroundColor = i*num;
i++;
info.innerHTML = "<font color='red'>変化中です、<br>しばらくお待ちください！</font>";
setTimeout("Change1()",10);
}else info.innerText = "完了しました！";
}
function Change2(){ //白色から変化する場合
if(i <= 255){
temp = i*dec;
dv.style.backgroundColor = 0xffffff - temp;
i++;
info.innerHTML = "<font color='red'>変化中です、<br>しばらくお待ちください！</font>";
setTimeout("Change2()",10);
}else info.innerText = "完了しました！";
}
//--></script>
</head>
<body>
<table width="80%" border="0" cellpadding="5">
<tr><td>
<form name="form1">
黒から白色へ<input type="button" name="bw" value="変化さす" onclick="Color1('bw')"><br>
黒から黄色へ<input type="button" name="by" value="変化さす" onclick="Color1('by')"><br>
黒から赤色へ<input type="button" name="br" value="変化さす" onclick="Color1('br')"><br>
黒から水色へ<input type="button" name="ba" value="変化さす" onclick="Color1('ba')"><br>
黒から青色へ<input type="button" name="bb" value="変化さす" onclick="Color1('bb')"><br>
黒から緑色へ<input type="button" name="bg" value="変化さす" onclick="Color1('bg')"><br>
黒から紫色へ<input type="button" name="bm" value="変化さす" onclick="Color1('bm')">
<hr>
白から黒色へ<input type="button" name="wb" value="変化さす" onclick="Color2('wb')"><br>
白から黄色へ<input type="button" name="wy" value="変化さす" onclick="Color2('wy')"><br>
白から赤色へ<input type="button" name="wr" value="変化さす" onclick="Color2('wr')"><br>
白から水色へ<input type="button" name="wa" value="変化さす" onclick="Color2('wa')"><br>
白から青色へ<input type="button" name="wb" value="変化さす" onclick="Color2('wbu')"><br>
白から緑色へ<input type="button" name="wg" value="変化さす" onclick="Color2('wg')"><br>
白から紫色へ<input type="button" name="wm" value="変化さす" onclick="Color2('wm')">
</form></td>
<td><center>
end(最終更新:12/11/7)