便利eelife Java Script

   戻る

テーブル背景がフェードします。
:黒へ :赤へ :緑へ :青へ



サンプルソース
<!--HTMLタグ </HEAD>の下に挿入してください。-->
<BODY >
<FORM name="myFORM">
<TABLE id="tbl">
<TBODY>
<TR>
<TD width="277"><INPUT type="radio" name="radio" onclick="bgclrbw('1')">:黒へ
<INPUT type="radio" name="radio" onclick="bgclrbw('2')">:赤へ
<INPUT type="radio" name="radio" onclick="bgclrbw('3')">:緑へ
<INPUT type="radio" name="radio" onclick="bgclrbw('4')">:青へ</TD>
</TR>
<TR>
<TD nowrap width="277" align="center"><INPUT size="10" type="text" name="dsp"></TD>
</TR>
<TR>
<TD width="277" align="center"><INPUT type="reset" value="リセット" onclick="riset()"></TD>
</TR>
</TBODY>
</TABLE>
</FORM>

</BODY>
<!--Javascript <HEAD>と</HEAD>の間に挿入してください。 -->
<SCRIPT language="JavaScript">
<!--eelife
function bgclrbw(c){v=c;n=255;
loop();
}

function loop(){   // カラーコードの変更
if(n>=0){
str= cov16(n);
if(v==1){dsp1="#"+str+str+str;}     // 黒
if(v==2){dsp1="#"+"FF"+str+str;}  // 赤
if(v==3){dsp1="#"+str+"FF"+str;}  // 緑
if(v==4){dsp1="#"+str+str+"FF";}  // 青

document.myFORM.dsp.value=dsp1;
document.all["tbl"].style.backgroundColor=dsp1;  //背景色の転換
n--;
setTimeout("loop()", 20);//
}
}
             //10進数を16進数2桁に変換する関数
function cov16(n){
var sin='0123456789ABCDEF';
return sin.charAt(Math.floor(n/16))+sin.charAt(n%16);
}

function riset(){
document.all["tbl"].style.backgroundColor="#ffffff";
}

// -->
</SCRIPT>
コメント
n は255 から 1 ずつ減りながら 0 になります。n を16進数2桁に変換した str は FF から 00  に
なっていきます。これでカラーコードを順次に変えていきます。
#FFFFFF(白) #000000(黒) #FF0000(赤) #00FF00(緑) #0000FF(青)

色見本
cov16(n)