<meta http-equiv="REFRESH" CONTENT="60;URL=index.html">
<script langage="javascript">
function ran(){
return (Math.floor(Math.random()*240)+16).toString(16);
}
function colorname(){
return ("#"+ran()+ran()+ran());
}
add="";
for(i=1; i<33; i++){
link=("."+i+":link{color:"+colorname()+";}");
active=("."+i+":active{color:"+colorname()+";}");
visited=("."+i+":visited{color:"+colorname()+";}");
hover=("."+i+":hover{color:"+colorname()+";}");
add=add+link+active+visited+hover;
}
document.write("<style>",add,"</style>");
</script>


(使い方)
ヘッダーに、上記のタグをそのまま埋め込む。
色を変えたいリンクに対して、
<a href="〜/云々.html" class=">n">のように、class名を1からの整数で入れる。
上記のタグの赤い数字の部分を、class名で使ううちの最大の数より1つ大きい数字にする。


まず、16進数2桁の乱数を発生させる。ran()という関数を宣言。

function ran(){
return (Math.floor(Math.random()*240)+16).toString(16);
}


Math.random() は0-1の間の任意の数値を発生させる関数。
Math.random()*240 は0-240間の任意の数値を発生させる。
(Math.random()*240+16) は16-256間の任意の数値、ということになる。
Math.floor(Math.random()*240+16) はその整数部分をとりだす。つまり、16-255 のどれかの整数になる。
Math.floor(Math.random()+240+16).toString(16) はそれを16進数にする。
結局、
function ran(){return (Math.floor(Math.random()+240+16).toString(16)} は、実行すると 16-255 の任意の値を16進数にして返す関数、ということになる。


色名にするため、 color()という関数を宣言。今作った function run() を活用。#05F3CE とか、そういう値を返す。

function colorname(){
return ("#"+ran()+ran()+ran());
}


#は文字列なので、"#"と書く。そのあとで、ran()を3回実行する。
function ran() で単に Math.random()*256 としなかったのには理由がある。
return (Math.random()*256).toString(16);
の返り値には、たとえば E とかの1桁の数値を返してくることがある。カラーコードは6桁なので、そうすると問題がある。
壁紙も #444444 と暗めの色を使用しているので、リンクの色は RGB とも最低 10 から、ということにして、あまり考えないことにした。


add="";
for(i=1; i<33; i++){
link=("."+i+":link{color:"+colorname()+";}");
active=("."+i+":active{color:"+colorname()+";}");
visited=("."+i+":visited{color:"+colorname()+";}");
hover=("."+i+":hover{color:"+colorname()+";}");
add=add+link+active+visited+hover;
}


link=("."+>i+":link{color:"+>colorname()+";}");
"link" に 「.」、「:link{color:」、「:}」の間に変数>i>colorname()の値を入れたものを入れる。
つまり、たとえば >i=3、colorname()で作られた値が >#689ECD なら、
link = .>3:link{color:>#689ECD;}
となる。
同様に、 active,visited,hover を作成する。

add=add+link+active+visited+hover;
変数 add のお尻に、今作ったばかりの link,active,visited,hover を代入する。
for(i=1; i<33; i++)
ということなので、i=1 からスタートして、 i<33 を満たすあいだ、i に 1 を足していきながらこの作業をくりかえす。
(つまり、ここでは32回の繰り返しが発生したあと、for以下の{ }から抜け出すことになる。)

整理すると、add には、たとえば

i=1 の終了時点で、
.1:link{color:#1ca4f0;}.1:active{color:#6eaad4;}.1:visited{color:#15fd9e;}.1:hover{color:#2c9a31;}

i=3 の終了時点で
.1:link{color:#1ca4f0;}.1:active{color:#6eaad4;}.1:visited{color:#15fd9e;}.1:hover{color:#2c9a31;}.2:link{color:#ea626d;}.2:active{color:#27ca42;}.2:visited{color:#986243;}.2:hover{color:#59f6f3;}.3:link{color:#56acbe;}.3:active{color:#b86098;}.3:visited{color:#27d7f9;}.3:hover{color:#eae584;}

32回終了時点で、add には以下のような値が格納されていることになる。
.1:link{color:#1ca4f0;}.1:active{color:#6eaad4;}.1:visited{color:#15fd9e;}.1:hover{color:#2c9a31;}.2:link{color:#ea626d;}.2:active{color:#27ca42;}.2:visited{color:#986243;}.2:hover{color:#59f6f3;}.3:link{color:#56acbe;}.3:active{color:#b86098;}.3:visited{color:#27d7f9;}.3:hover{color:#eae584;}, ... ,.32:link{color:#722a13;}.32:active{color:#2db723;}.32:visited{color:#96934e;}.32:hover{color:#6f3841;}

この作業を始める前に、
add="";
として中身をクリアしておき、頭にヘンな値がつかないようにしている。


ルーチンから抜け出したところで上の add に入っている値をそのままスタイルシートに書き出す。
document.write("<style type=text/css>",add,"</style>);
文字列は" "で囲み、変数は囲まない。


   念のために書くと、もし
   document.write("<style type=text/css>","add","</style>);
   なんて書くと、
   <style type=text/css>add</style>
     と表記されることになる。


あとは、metaで一定時間ごとにリフレッシュするように書いただけ。この例では60秒ごとに設定している。
実際には、複数のファイルでこのスタイルを使っているので、.jsファイルを作成して共有呼び出しをして使っている。


今後の課題:
1. link,active,visited, hover と、4つの値を返すのに変数だけが異なるまったく同じ式を使っているので、あらかじめもうひとつ関数を宣言して4つの変数を順に入れていったほうがキレイだ、ということは分かるのだが。
関数の中で関数を呼び出す方法をまだ理解できていない。なんどか挑戦したが、動かなかった。誰かおしえてください。
2.そうは言っても、乱数の発生範囲はやはり 0-255 が美しい。0-15 の値が Math.random発生した場合の処理を考えるべきだろう。
3.黒以外の壁紙に対しても使えるように乱数の発生範囲をRGBそれぞれについて規定したいところだ。
(もともと、そのために2桁ごとに乱数を発生させている)

リンクの色を指定するには、スタイルシートを使わないでやるには <body>タグを使うしかない(んですよね?)。
クラス名に整数を使えなければ不可能なアイデアだった(と思う)。
他のやり方があったら、誰かおしえてください。
説明が難しい場合は、メールください。掲示板でも可。もっと分かりやすい書き方で書くように努力します。

かかった作業量: 0.0055-0.0084 人月ぐらい。

このプログラムはフリーです(笑)
でも、なるべくならひとことよろしく。よろしければ、こちらからリンクします。

02/03/06


追加の注文はこちらから
注文の多い料理店
こねこねのさいとトップへ