今回は、スタイルシートをＪＡＶＡスクリプトで文字の大きさと色を操作するお話です。
下の”大きさが変わる””色が変わる”をクリックしてみてください。
サイコロＴｏｗｎ！
|大きさが変わる！|
|色が変わる！|
では早速ソースから！
<script language="JavaScript">
<!--
var s=12,k=0;//ｓは文字の大きさの数値を代入する変数。最初は１２。
c = new Array(0,0,0);
var f1=0,f2=0,f3=0;
c16 = new Array("00","00","00");
function ookisa(){
document.all. moji.style.fontSize = s+"pt";
s=s+1;
timerID=setTimeout(" ookisa()",40);
if (s>60){
clearTimeout(timerID);
}
}
function iro() {
document.all. moji.style.color = "#"+c16[0]+c16[1]+c16[2];
switch(f1){
case 0:
if (c[0]+2>255){c[0]=255;f1=1;} else{c[0]=c[0]+2;}
break;
case 1:
if (c[0]-7<0){c[0]=0;f1=0;} else{c[0]=c[0]-7;}
break;
}
switch(f2){
case 0:
if (c[1]+5>255){c[1]=255;f2=1;} else{c[1]=c[1]+5;}
break;
case 1:
if (c[1]-5<0){c[1]=0;f2=0;} else{c[1]=c[1]-5;}
break;
}
switch(f3){
case 0:
if (c[2]+7>255){c[2]=255;f3=1;} else{c[2]=c[2]+7;}
break;
case 1:
if (c[2]-2<0){c[2]=0;f3=0;} else{c[2]=c[2]-2;}
break;
}
for(i=0;i<3;i++){
c16[i]=c[i].toString(16);
if (c16[i].length==1){
c16[i]="0"+c[i].toString(16);
}
}
k=k+1;
timerID2=setTimeout(" iro()",30);
if (k>280){clearTimeout( timerID2);}
}
//-->
</script>
</head>
<body>
<div align="center" id=" moji" style="font-family:'ＭＳ Ｐゴシック';font-size:12pt;color:#000000;font-weight:bold">サイコロＴｏｗｎ！</div>
<a href="#" onClick="s=12; ookisa();">|大きさが変わる！|</a>
<a href="#" onClick="k=0; iro();">|色が変わる！|</a><br>
</body>
|
まずは、＜ｂｏｄｙ＞〜＜／ｂｏｄｙ＞の中の
<div align="center" id="moji" style="font-family:'ＭＳ Ｐゴシック';font-size:12pt;color:#000000;font-weight:bold">サイコロＴｏｗｎ！</div>
から、見ていきましょう。
中央寄せで、サイコロＴｏｗｎ！と記述しているタグです。
スタイルシートで文字の種類はＭＳ Ｐゴシック、文字の大きさは１２ポイント、文字の色は＃００００００（つまり黒）と言うように指定しています。
このうち文字の大きさと色をＪＡＶＡスクリプトで操作しようと言うわけです。
◆
まずは、大きさの操作から！
＜ｈｅａｄ＞〜＜／ｈｅａｄ＞に書いてあるＪＡＶＡスクリプトの中から、
ookisa()と名付けた関数を見てください。
function ookisa(){
document.all. moji.style.fontSize = s+"pt";
s=s+1;
timerID=setTimeout(" ookisa()",40);
if (s>60){
clearTimeout(timerID);
}
}
|
この中で、実際にスタイルシートの
font-sizeを指定する働きをしているのは、
document.all.moji.style.fontSize = s+"pt";の部分です。
ｉｄにmojiと名付けたタグのスタイルシートの
font-sizeを設定する働きをしています。
ｓは変数です。最初に１２という数字が入っています。
それに
"pt"という文字列を足すと
"12pt"という文字列になります。
−−−−−−−−−−−−注−−−−−−−−−−−−−−−−−−−−−−−
ＪＡＶＡスクリプトでは、
数字の１２と１２を足すと・・１２＋１２は数字の２４になります。
文字の”１２”と”１２”を足すと・・”１２”＋”１２”は文字の”１２１２”になるのです。
そして、数字の１２と文字の”ｐｔ”を足すと・・１２＋”ｐｔ”は文字の”１２ｐｔ”になります。
−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−
そして、その次に
s=s+1で、ｓを１増やします。
それから、タイマーで１０００分の４０秒後に、この関数を繰り返します。
timerID=setTimeout("ookisa()",40);
if (s>60){
clearTimeout(timerID);
}
そして、ｓが６０になったら繰り返しが終わります。
という感じで１２ポイントから５９ポイントまで１ポイントずつ大きくなっていきます。
この
ookisa()と名付けた関数は本文中の、
<a href="#" onClick="s=12;ookisa();">|大きさが変わる！|</a>
をクリックすると始まります。
onClick="s=12;ookisa();"は、
onclickはここをクリックしたとき。
そして、その後にＪＡＶＡスクリプトを書きます。この場合はｓを１２にして、
ookisa()という関数を働かせると言うことです。
◆
さて、次に色を変化させるＪＡＶＡスクリプトです。
<div align="center" id="moji" style="font-family:'ＭＳ Ｐゴシック';font-size:12pt;color:#000000;font-weight:bold">サイコロＴｏｗｎ！</div>
のところで、最初、色は＃００００００（黒）にしています。
そしてこれは、赤、緑、青をそれぞれ２桁の１６進数で表していますね。
（参照）
この赤青緑をそれぞれ別々に操作するために、変数をそれぞれに用意します。
c = new Array(0,0,0);//赤、緑、青それぞれの値（１０進数）を入れる配列
var f1=0,f2=0,f3=0;
c16 = new Array("00","00","00");//赤、青、緑それぞれの値を１６進数で表した文字列を入れる配列
配列についてはここを
参照
色を変化させるのは、関数
iro()で行っています。
そして、その中でも実際に色を変更する命令は、
document.all.moji.style.color = "#"+c16[0]+c16[1]+c16[2];です。
この部分に赤、緑、青のそれぞれの値を"＃□□□□□□"という形の文字列になるようにすればいいわけです。
最初、c16[0]には"00"、c16[1]には"00"、c16[2]には"00"、がそれぞれは言ってますから、
"#"+"00"+"00"+"00"となります。これは"#000000"ですね。
と言うわけで、関数
iro()のソースです。
function iro() {
document.all. moji.style.color = "#"+c16[0]+c16[1]+c16[2];
switch(f1){// 赤の値c[0]の計算（１０進数）
case 0:
if (c[0]+2>255){c[0]=255;f1=1;} else{c[0]=c[0]+2;}
break;
case 1:
if (c[0]-7<0){c[0]=0;f1=0;} else{c[0]=c[0]-7;}
break;
}
switch(f2){// 緑の値c[1]の計算（１０進数）
case 0:
if (c[1]+5>255){c[1]=255;f2=1;} else{c[1]=c[1]+5;}
break;
case 1:
if (c[1]-5<0){c[1]=0;f2=0;} else{c[1]=c[1]-5;}
break;
}
switch(f3){// 青の値c[2]の計算（１０進数）
case 0:
if (c[2]+7>255){c[2]=255;f3=1;} else{c[2]=c[2]+7;}
break;
case 1:
if (c[2]-2<0){c[2]=0;f3=0;} else{c[2]=c[2]-2;}
break;
}
for(i=0;i<3;i++){//１０進数の赤、青、緑の数値を１６進数形式の文字列に。
c16[i]=c[i].toString(16);
if (c16[i].length==1){//一桁の時は、文字の０をつけて２桁に。
c16[i]="0"+c[i].toString(16);
}
}
k=k+1;//繰り返すたびに１ずつ足している。
timerID2=setTimeout(" iro()",30);//１０００分の３０秒後に繰り返し
if (k>280){clearTimeout( timerID2);}
//もし、ｋが２８０以上になったら繰り返しをやめる。
} |
では、色を計算している部分です。
これは、赤い色を計算している部分です。
switch(f1){//赤の値c[0]の計算（１０進数）
case 0:
if (c[0]+2>255){c[0]=255;f1=1;} else{c[0]=c[0]+2;}
break;
case 1:
if (c[0]-7<0){c[0]=0;f1=0;} else{c[0]=c[0]-7;}
break;
}
この部分では、赤の値が最初は０ですが、それが２ずつ増えていって、２５５を越えると今度は７ずつ減っていきます。
そしてまた、０より小さくなると２ずつ増えていきます。これを繰り返すようになっています。
赤い色は＃のあと、００からｆｆまでの２桁の１６進数で指定しますね。
１０進数では０から２５５に相当します。
そして、これを計算している部分は２つあります。
c[0]=c[0]+2;←赤の値に２を足す。
c[0]=c[0]-7;←赤の値から７を引く。
色の指定は０から２５５までだから、０より小さくなってしまったときや、２５５より大きくなってしまったときのために、
if (c[0]+2>255){c[0]=255;f1=1;} else{c[0]=c[0]+2;}
赤の値c[0]に２を足したときに、
２５５より大きかったら、赤の値c[0]は２５５にして、さらにｆ１を１にする。
２５５より大きくなかったら赤の値c[0]に２を足す。
という意味です。
そして、ｆ１の値によって計算する式を変えています。
それが↓これ。
（参照）
switch(f1){
case 0:
・・・・ｆ１が０の時はここを行う。
break;
case 1:
・・・・ｆ１が１の時はここを行う。
break;
}
だから、ｆ１が１になると、
if (c[0]-7<0){c[0]=0;f1=0;} else{c[0]=c[0]-7;}
の方を実行することになります。
今度は７ずつ赤の値を減らしていきます。
そして、赤の値から７引いたものが、０よりも小さくなると、赤の値を０にしてｆ１を０にします。
そうすると、今度は赤の値を２ずつ足していく方が実行されます。
このように、０→２５５、２５５→０、と言うふうに増えていったり減っていったりしています。
あと、緑の値、青の値もそれぞれ同じような方法でやっています。
このように赤、緑、青それぞれの値を変化させて、次にそれぞれを１６進数で表される文字列に変換します。
それが、↓この部分！
for(i=0;i<3;i++){//１０進数の赤、青、緑の数値を１６進数形式の文字列に。
c16[i]=c[i].toString(16);
if (c16[i].length==1){//一桁の時は、文字の０をつけて２桁に。
c16[i]="0"+c[i].toString(16);
}
}
は、数値を文字列に変換する働きをします。
（ ）ないに何も入れなければ、１０進数で表される文字列に変換します。
（１６）と言うふうに１６を入れると１６進数で表される文字列に変換します。
c16[i]=c[i].toString(16);では、c16[i]にc[i]を１６進数で表した文字列を代入しています。
そして、ｉは０、１、２という値を取りながら３回繰り返します。
（参照）
つまり、
c16[0]=c[0].toString(16);
c16[1]=c[1].toString(16);
c16[2]=c[2].toString(16);
というふうに、赤、緑、青それぞれの値を１６進数の文字列にしているのです。
ところで、カラーコードは赤、青、緑それぞれが２桁の１６進数で表します。
１桁になったときには、それを２桁の文字列にする必要がありますね。
if (c16[i].length==1){//一桁の時は、文字の０をつけて２桁に。
c16[i]="0"+c[i].toString(16);
}
そこで、１桁の時に文字の"0"を加えて２桁に変えます。
c16[i].lengthは、c16[i]の桁数が何文字かを表します。
後は、タイマーでｋが２７９になるまで繰り返しです。
timerID2=setTimeout("iro()",30);//１０００分の３０秒後に繰り返し
if (k>280){clearTimeout(timerID2);}
このように関数iro()を作っておいて、本文中の
<a href="#" onClick="k=0;iro();">|色が変わる！|</a>
これで、|色が変わる！|をクリックするとｋを０にして関数
iro()を実行します。