ランダムきゅ〜ぶ
いろんな色の■を表示。
目次に戻る

● 設置例


ランダムな色の■を表示させます。発色する色の範囲を指定して統一感のある色合いのランダム色を作ることが可能。
ホームページのワンポイントに……なるか?

●ソース
1・JavaScript

<script type="text/javascript">
<!--
function RndCube(sizew, sizeh, color1, color2){
	//color1,2を色ごとに分解して10進に戻し取っておく。
	color=new Array(6);
	color[0]=color1.substring(0, 2);
	color[1]=color1.substring(2, 4);
	color[2]=color1.substring(4, 6);
	color[3]=color2.substring(0, 2);
	color[4]=color2.substring(2, 4);
	color[5]=color2.substring(4, 6);


	for(i=0; i<6; i++){
		color[i]=parseInt(color[i],16).toString(10);
		if(isNaN(parseInt(color[i],16))) color[i]=0;
	}

	//描画
	for(i=0; i<=sizeh-1; i++){
		for(j=0; j<=sizew-1; j++){
			
			colcode=RGBHtml(
				GetRandom(color[0],color[3]),
				GetRandom(color[1],color[4]),
				GetRandom(color[2],color[5]));
			document.write("■".fontcolor(colcode)+" ");
		}
		document.write("<br>");
	}

}

function GetRandom(value1, value2){
	var upper;
	var lower;

	if(value1>value2){
		upper=value1*1;
		lower=value2*1;
	}else{
		upper=value2*1;
		lower=value1*1;
	}

	rtn=(lower+(Math.floor(Math.random()*(upper-lower))));
	return rtn;
}

function RGBHtml(r,g,b){
	if(r<16)	r="0"+r.toString(16);
	else		r=r.toString(16);
	if(g<16)	g="0"+g.toString(16);
	else		g=g.toString(16);
	if(b<16)	b="0"+b.toString(16);
	else		b=b.toString(16);
	return	"#"+r+g+b;
}
//-->
</script>


2・表示部分

<script type="text/javascript">
<!--
	RndCube(6,5,"aaffff","ccaaff");
//-->
</script>

●設置方法
・上記の1・JavaScriptをHTMLソース内<head>〜</head>に、
2・表示部分を<body>〜</body>の任意箇所に貼り付けてください。

jsファイルも用意しています →JSファイルダウンロード
jsファイルを本スクリプトを使用するHTMLと同じディレクトリに入れると、1・JavaScriptをコピー&ペーストする代わりに

   <script src="rndcube.js"></script>

と記述するだけで使用することが出来ます。

・2のパラメータを好みの値に変更します。
   RndCube((横の■の個数),(縦の■の個数),(色の範囲1),(色の範囲2));

色の範囲1、2でランダム色の傾向を指定。
その他フォントのサイズや行間などはスクリプトの外からタグやCSSなどで指定してください。



目次に戻る