|
上のBoxの色が変化します。
|
Sample Source......................................................................>>>
<script language="JavaScript"><!--
var origin,inc,dec,i; //元の色、増加さす色値、減らす色値、1→255
function Color1(c){
i = 0;
if(c == "rb"){origin=0xff0000;inc=0x000001;dec = 0x010000;} //赤から青色へ
else if(c == "by"){origin=0x0000ff;inc=0x010100;dec = 0x000001;} //青から黄色へ
else if(c == "gr"){origin=0x00ff00;inc=0x010000;dec=0x000100;} //緑から赤色へ
else if(c == "ba"){origin=0x0000ff;inc=0x000101;dec=0x000001;} //青から水色へ
else if(c == "gb"){origin=0x00ff00;inc=0x000001;dec=0x000100;} //緑から青色へ
else if(c == "mg"){origin=0xff00ff;inc=0x000100;dec=0x010001;} //紫から緑色へ
else if(c == "ym"){origin=0xffff00;inc=0x000001;dec=0x000100;} //黄から紫色へ
Change1();
}
function Change1(){
if(i <= 255){
dv.style.backgroundColor = origin + inc*i - dec*i;
i++;
info.innerHTML = "<font color='red'>変化中です、<br>しばらくお待ちください！</font>";
setTimeout("Change1()",10);
}else info.innerText = "完了しました！";
}
//--></script>
</head>
<body>
<table width="80%" border="0" cellpadding="5">
<tr><td><form name="form1">
赤から青色へ<input type="button" name="rb" value="変化さす" onclick="Color1('rb')"><br>
青から黄色へ<input type="button" name="by" value="変化さす" onclick="Color1('by')"><br>
緑から赤色へ<input type="button" name="br" value="変化さす" onclick="Color1('gr')"><br>
青から水色へ<input type="button" name="ba" value="変化さす" onclick="Color1('ba')"><br>
緑から青色へ<input type="button" name="bb" value="変化さす" onclick="Color1('gb')"><br>
紫から緑色へ<input type="button" name="bg" value="変化さす" onclick="Color1('mg')"><br>
黄から紫色へ<input type="button" name="bm" value="変化さす" onclick="Color1('ym')">
</form></td><td>
<center>
<div id="dv" style="width:150;height:60;border:thin solid green"></div>
<div id="info">上のBoxの色が変化します。</div>
</center>
</td></tr></table>
end(最終更新:12/11/7)