sample-5 お★さまキラキラ part2

星を動かしてるように見せてます。sample-4と違って、星に1つ1つ名前をつけて、その位置を変えてます。IE用です。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
<META http-equiv="Content-Script-Type" content="javascript">
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<META http-equiv="Content-Style-Type" content="text/css">
<title>JavaScriptの実験・サンプル5・お星様 [その4の応用]</title>
<script type="text/javascript">
<!--
rd=0;
function star(){
var n=0;
for (i=0; i<16; i+=.4){
var s=100;
var x=200+Math.sin(rd*2)*s;
var y=200+Math.cos(rd)*s;
rd+=.15;
var na="im"+n;
document.all(na).style.left=x;
document.all(na).style.top=y;
n++;
}
setTimeout("star()",200);
}
//-->
</script>
</head>
<body style="background-color:black" onLoad="star()">
<script type="text/javascript">
<!--
n=0;
for (i=0; i<16; i+=.4){
x=0; y=0;
c=' name="im'+n+'"';
n++;
v='<img src="image/star_1.png" style="position:absolute; left:'+x+'; top:'+y+'" width="'+i+'"'+c+'>';
document.write(v);
}
//-->
</script>
</body>
</html>

解説です。順番に書いてありますが、流れ的に、BODY内のJavaScriptの後でHEAD内のJavaScriptを見るといいかもしれません。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
HTML4.01Strictという文法でHTMLを書きます。

<html lang="ja"></html>
この中にHTMLを書きます。lang="ja"で、日本語です。

<head></head>
この中に、METAとかJavaScriptの関数とかを書きます。

<META http-equiv="Content-Script-Type" content="javascript">
JavaScriptを使います。

<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
Shift-JISを使います。文字化け対策に書いておきましょう。

<META http-equiv="Content-Style-Type" content="text/css">
スタイルシートを使います。

<title>JavaScriptの実験・サンプル5・お星様 [その4の応用]</title>
タイトルです。なるたけ詳しい方がいいでしょう。

var n=0;
nに0を入れています｡名前の番号に使ってます。
その関数内のみでしか使わない変数は、varをつけてローカル変数にすると、他の関数で同じ名前の変数を使ってもごっちゃになりません。

for (i=0; i<16; i+=.4){
}
繰り返し処理です。BODY内のと同じものを使ってますが、iの替わりにnを使い、繰り返す数を調節すれば、短くなります。

var s=100;
Sに100を入れています。大きさに使ってます。大きくすれば、画面いっぱいに広がるでしょう。

var x=200+Math.sin(rd*2)*s;
var y=200+Math.cos(rd)*s;
sin,cosの値にrd(角度に使ってる)をいれて、s(大きさ)をかけて、位置を決めています。sin内のrdに2をかけています。かけないで、sin(rd)にすると、円になります。いろいろいじくると、いろんな形になります。本当はsinやcosに入れるのは、角度*π/180です。それは、下のサンプルで。

rd+=.15;
角度に0.15を足しています。これが、このプログラムのいいかげんなトコです。こーすると、とりあえず、順番に動いているように見えます。他の数字だと、流れ(?)が変わります。
少しマシにしたサンプルです。

document.all(na).style.left=x;
document.all(na).style.top=y;
na(名前)のleft(横位置),top(縦位置)に、さっき作ったx,yを入れています。
all(na)とするところが、ポイントです。直接、document.na.style.leftなどとやってもうまくいきませんので、変数を使うときは、all()に入れておきます。
名前を使わない場合は、images[]配列を使います。

setTimeout("star()",200);
0.2秒ごとにこの関数を呼び出して、ずっと繰り返します。
すると、rdが増え続けてエラーになると思いますが、計算はしてないけど、何日も何年もかかると思いますので、エラー回避はつけてないです。気になる方は、if (rd>=360) rd=0; とか、つけてください。

<body style="background-color:black" onLoad="star()"></body>
style="background-color:black" で、背景を黒にしています。
onLoad="star()" で、ロード時(HTMLを読みこんだ時)に、star()を呼び出します。

c=' name="im'+n+'"';
name(名前)を作っています。im0,im1,...となります。
id=でも動きます。

v='<img src="image/star_1.png" style="position:absolute; left:'+x+'; top:'+y+'" width="'+i+'"'+c+'>';
v='<img src="image/star_1.png" でファイル名を指定しています。
style="position:absolute; で、位置を絶対位置の指定にしてます。styleは、positionを決めないと、表示されないことがあります。
left:'+x+'; top:'+y+'" 始めの位置ですけど、left:0; top;0 としても同じです。
width="'+i+'"' 大きさ(幅)を決めています。height(高さ)をつけるのもいいですね。
+c+'>'; 名前です。

document.write(v);
上で作ったvをHTMLとして書いてます。変数vを使わずに直接document.write内に書いてもいいです。

星の移動