ランダムぐらで〜しょん
グラデーション文字列を自動生成。
目次に戻る

● 設置例




グラデーションする文字列を自動作成します。
リロードごとにランダムな色でグラデーションを作ることも出来ます。

● ソース
1・JavaScript関数

<script type="text/javascript">
<!--
function gradey(str, first, end){
//一色目r,g,b、二色目r,g,bをフォームから取得
	color=new Array(6);
	color[0]=first.substring(0, 2);
	color[1]=first.substring(2, 4);
	color[2]=first.substring(4, 6);
	color[3]=end.substring(0, 2);
	color[4]=end.substring(2, 4);
	color[5]=end.substring(4, 6);

//文字数も計っとく
	len=str.length;

//あとでタグの入る変数
	temp="";


//取得した色データを10進に変換。条件に合わない文字だった場合0にする
	for(a=0;a<6;a++){
		color[a]=parseInt(color[a],16).toString(10);
		if(isNaN(parseInt(color[a],16)))
			color[a]=0;
	}

//タグ作成ループ
	for(a=0;a<len;a++){

	//一文字ごとの差分
		r=Math.floor((color[3]-color[0])/(len-1));
		g=Math.floor((color[4]-color[1])/(len-1));
		b=Math.floor((color[5]-color[2])/(len-1));

	//差分をはじめの色に徐々に足していく
		r=color[0]-0+r*a;
		g=color[1]-0+g*a;
		b=color[2]-0+b*a;

	//マイナス値になったら0にしとく
		if(r<0)	r=0;
		if(g<0)	g=0;
		if(b<0)	b=0;

	//16進に戻す。もし16以下なら頭に0がつく。
		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);
	
	//タグを作りましょう
		temp=	temp+
			"<FONT COLOR=\"#"+r+""+g+""+b+""+"\">"+
			str.substr(a, 1)+
			"</FONT>";
	}
	return temp;
}

function rndcolor(){
var t="";
for(count=1; count<=6; count++){
	var kazu = Math.floor(Math.random()*16);
	if(kazu >= 0 && kazu <= 9)	t=t+kazu;
		else if(kazu == 10)	t=t+"a";
		else if(kazu == 11)	t=t+"b";
		else if(kazu == 12)	t=t+"c";
		else if(kazu == 13)	t=t+"d";
		else if(kazu == 14)	t=t+"e";
		else if(kazu == 15)	t=t+"f";}
	return t;
}
//-->
</script>

2・JavaScript表示
固定の色で表示

<script type="text/javascript">
document.write(gradey("**********固定グラデーション**********", "0000ff", "ff0000"));
</script>

リロード毎にランダムな色で表示

<script type="text/javascript">
document.write(gradey("**********ランダムグラデーション**********", rndcolor(), rndcolor()));
</script>

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

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

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

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

*gradey("表示する文字列", "はじめの色", "おわりの色")
 という構成になっています。
 はじめの色、またはおわりの色にrndcolor()と記述すると、ランダムな色を設定します。

目次に戻る