グラデーションを作る

<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>サンプル</title>
<script type="text/javascript">
<!--
var list = new Array("0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f");
function gradation() {
	var max = list.length;
	var r1 = Math.floor(Math.random() * max);
	var r2 = Math.floor(Math.random() * max);
	var g1 = Math.floor(Math.random() * max);
	var g2 = Math.floor(Math.random() * max);
	var b1 = Math.floor(Math.random() * max);
	var b2 = Math.floor(Math.random() * max);

	document.getElementById("grad").style.color = "#" + list[r1] + list[r2] + list[g1] + list[g2] + list[b1] + list[b2];
	setTimeout("gradation();", 100);
}
// -->
</script>
</head>
<body onload="gradation();">
<span id="grad">ランダムグラデーション</span>
</body>
</html>

以前私が遊びで JavaScript のスロットを作ったときに使ったルーレットの1部分を色指定に使いました。これは色表現で使う16進数表記を配列で作ってそれを6個に分けて、色を取得します。

例えば水平線に指定すれば水平線自体がグラデーションになります。水平線（<hr> での色変化は Internet Explorer でしか変わらなかったので、他の方法で表示しています）

今現在の色のコードがステータスバーに表示しています。また、下のボタンでグラデーションの部分を止めれらます。