<script type="text/javascript">
<!--
function set(){
	str=document.grade.bun.value;
	first=document.grade.colora.value;
	end=document.grade.colorb.value;

	kekka=gradey(str, first, end);

//表示
	document.write("<p align=\"center\">");
	document.write(kekka);
	document.write("<br><form><textarea cols=\"50\" rows=\"5\">");
	document.write(kekka);
	document.write("</textarea></form>");
	document.write("</p>");
}


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;
}
//-->
</script>

<form name="grade">
<input type="text" name="bun" size="50"> を
<BR>#<input type="text" name="colora" size="8">
から #<input type="text" name="colorb" size="8"> にグラデーション
<BR><input type="button" value="作成！" onClick="set()">
</form>