イヌでもわかるJavaScript講座
|
イヌでもわかるJavaScript講座
|
|
Step.51 - ボタンが押されると画像を変える
|
ボタンが押されると、大吉、吉、凶のいずれかのイメージを表示する「おみくじ」を作ってみます。 |
| Step テーマ ● 過去Step の おさらい |
実行例 |
リスト<script type="text/javascript"><!-- myImage = new Array( // 画像ファイル名の設定 "kuji1.gif", "kuji2.gif", "kuji3.gif" ); function myChange(){ // ボタンが押された myRnd = Math.floor( Math.random() * myImage.length ); // 0〜(画像の数-1)の乱数を求める document.kuji.src = myImage[myRnd]; // 乱数番目の画像を表示する } // --></script> <img src="kuji0.gif" border="0" name="kuji"> <form> <input type="button" value="ひく" onclick="myChange()"> </form> |
| サンプルだけの HTMLは こちらへ |
説明今回は、「おみくじ」という表紙を表示して、ボタンを押せば、中身を表示する「おみくじ」を作ってみます。 前回の Step に ボタンを追加しただけです。 ボタンを押して、乱数を求めて、表示するに変更しました。 <form> <input type="button" value="ひく" onclick="myChange()"> </form> ボタンを押すと、myChange() を呼ぶようにしました。 myChange() の中身は、前回の Step のまんまです。 function myChange(){ myRnd = Math.floor( Math.random() * myImage.length ); document.kuji.src = myImage[myRnd]; }
参考ステップ Step.50 アクセス毎に画像を変えてみましょう Step.52 スロットマシン風おみくじを作ってみましょう | ||||||||||||
 |
