WEST MiRa(1,739 Byte)
JavaScript(1,601 Byte)
[ JavaScriptの目次 ]
▲トップページ
▲基礎知識
▲基本操作
▲その他
▲サンプル集(257種類)
▲その他

[ 他の一覧 ]
◆↑ホームへ

 

■ JavaScript - サンプル集(257種類) - 色
　　 - 背景色自動変更

ページの背景色が、どんどん変わっていくスクリプトです。
お好きな色設定、また色が変更する間隔も変更する事が出来ます。

・サンプルを見る
・ソースを保存する
（右クリック→「対象をファイルに保存」or「リンクを名前を付けて保存」して下さい。）
・ソースを見る
・解説を見る




[ ソース ] 

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">

<script language="JavaScript">
<!--//Copyright (C) WEST MiRa http://www.west-mira.jp

	iros=new Array();

	//使用したい背景色を指定する
	iros[0]="#ffffff";
	iros[1]="#a52a2a";
	iros[2]="#6495ed";
	iros[3]="#daa520";
	iros[4]="#6b8e23";
	iros[5]="#fa8072";
	iros[6]="#000000";

	//背景色が変わる早さを秒数で指定する
	//1なら1秒、2なら2秒
	my_time=1;


	a=0;
	kazu=0;
	function my_bgcolor()
		{
		document.bgColor=iros[kazu];
		kazu++;
		if(kazu >= iros.length)kazu=0;
		clearTimeout(a);
		a=setTimeout('my_bgcolor();',my_time*1000);
		}

//-->
</script>

</head>

<body onLoad="my_bgcolor();">
<br>

</body></html>

[ 解説 ]

上から9〜15行目で、色の指定を行っています。
「#fff8dc」や「#faebd7」と書かれた部分が、色の設定になっています。

お好きな色に書き換えてください。
RGB指定だけでなく、カラーネームでの指定も可能です。

使用する色が7つ以下ならば、不要な行を削除してください。
その際、下の方から削除してください。

例えば、サンプルでは色が7色設定されていますが、実際には4色だけ使いたい場合。

以下のようになります。

変更前変更後
iros=new Array();
iros[0]="#fff8dc";
iros[1]="#faebd7";
iros[2]="#ffefd5";
iros[3]="#ffebcd";
iros[4]="#ffdead";
iros[5]="#ffdab9";
iros[6]="#f5deb3"; 		iros=new Array();
iros[0]="#fff8dc";
iros[1]="#faebd7";
iros[2]="#ffefd5";
iros[3]="#ffebcd";

反対に色を増やしたい場合は、同じ書式で必要な分、色設定の行を増やしていきます。

ただしこの時、一つだけ注意が必要です。
色を設定する行の先頭部分には、数字が着いています。

この数字は、1つずつ繰り上がっていっていますね。
行を増やす場合には、同じように数字を繰り上げていく必要があります。

サンプルでは、現在「6」まで数字が割り振られていますから、 ここから更に1行増やした場合、増やした行の先頭の数字は「7」になります。

では、実際に、どのようになるのか見てみましょう。

サンプルに1つ色を増やす場合、どうなるのか？

以下のソースをご覧下さい。

変更前変更後
iros=new Array();
iros[0]="#fff8dc";
iros[1]="#faebd7";
iros[2]="#ffefd5";
iros[3]="#ffebcd";
iros[4]="#ffdead";
iros[5]="#ffdab9";
iros[6]="#f5deb3"; 		iros=new Array();
iros[0]="#fff8dc";
iros[1]="#faebd7";
iros[2]="#ffefd5";
iros[3]="#ffebcd";
iros[4]="#ffdead";
iros[5]="#ffdab9";
iros[6]="#f5deb3";
iros[7]="#ffffff";

最後に、色が変わっていく間隔を変える方法ですが、これは上から17行目にある
my_time=1;
の「1」の数字をご変更下さい。

「1」は、1秒間隔で色が変わる設定になっています。
2秒間隔にしたいのなら、「2」と書き込んでください。
1秒より短い間隔で変更したい場合は、小数点以下の数値をご記入下さい。
例えば、「0.5」のように記述してください。

ただし、あまり短い間隔ですと、見にくいどころか目が痛くなりますのでご注意下さい。

　 WEST MiRa > JavaScript > サンプル集(257種類) > 色 > 背景色自動変更 >

バナー、リンクについて  ,   利用規約  ,   ヘルプ

Copyright (C) 1998-2007 WEST MiRa. All rights reserved.