イヌでもわかるJavaScript講座
|
イヌでもわかるJavaScript講座
|
|
Step.50 - アクセス毎に画像を変える
|
アクセス毎に、大吉、吉、凶のいずれかのイメージを表示する「おみくじ」を作ってみます。 |
| Step テーマ ● 過去Step の おさらい |
実行例
|
リスト<img border="0" name="kuji" src="kuji0.gif"> <script type="text/javascript"><!-- myImage = new Array( // 画像ファイル名の設定 "kuji1.gif", // 大吉の画像 "kuji2.gif", // 吉の画像 "kuji3.gif" // 凶の画像 ); myRnd = Math.floor( Math.random() * myImage.length ); // 0〜(画像の数-1)の乱数を求める document.kuji.src = myImage[myRnd]; // --></script> |
| サンプルだけの HTMLは こちらへ |
説明今回は、「大吉」、「吉」、「凶」の３つのイメージのいずれかを表示するおみくじを作ってみます。 <img border="0" name="kuji" src="kuji0.gif"> この IMGタグの画像を変えます。 myImage = new Array( "kuji1.gif", "kuji2.gif", "kuji3.gif" ); 今回は、「大吉」、「吉」、「凶」の３つの画像を用意しました。 myRnd = Math.floor( Math.random() * myImage.length ); 0〜2 の乱数を求めます。 ※ 乱数は、Step.14 参照。 document.kuji.src = myImage[myRnd]; myRnd番目の画像へ変更します。 ※ 画像変更は、Step.33 参照。 これで、更新するたびに、ランダムにおみくじが表示されました。
参考ステップ Step.14 九九の問題に答えてみましょう ※ Math.random、Math.floor Step.33 マウスカーソルが触れたら画像を変えてみましょう ※ document.<NAME>.src | ||||||||||||
 |
