N-takデザインブログ

WEBで培った作品や技術を公開しています。

初心者にどうぞ!おみくじjs

初心者向けです。

おみくじjavascriptをアップしました。

 

サンプルはこちら

 

 

イヌでもわかるJavaScript講座 - おみくじ その2

 

では、コード解説です。

f:id:r4m0khksticiibypvp4k:20131111154115g:plain

 

 

        <script language="JavaScript"><!--

myImage = new Array(                      // 画像ファイル名の設定

"images/kuji/kuji1.gif",

"images/kuji/kuji2.gif",

"images/kuji/kuji3.gif",

"images/kuji/kuji4.gif",

"images/kuji/kuji5.gif",

"images/kuji/kuji6.gif",

"images/kuji/kuji7.gif"

);

 

function omikuji(){                            // ボタンが押された

 myRnd = Math.floor( Math.random() * myImage.length ); // 0~(画像の数-1)の乱数を求める

 document.kuji.src = myImage[myRnd];      // 乱数番目の画像を表示する

}

// --></script>

 

<img src="images/kuji/kuji0.gif" border="0" name="kuji">

<form class="btn">

<input type="button" value="おみくじを引く" onclick="omikuji()">

</form>

 

 

以上のコードをhtmlファイルの好きなところに貼り付けてください。

 

フォームボタンのオンクリックで"omikuji"が発動します。

"myimage"の中には変更したい画像を挿入しておきます。

もちろん画像の大きさや内容はお好きなように変更して下さい。

 

ただし、格納している場所でパスが変わるのでそこは要注意。

 

乱数指定で画像が表示されます。

 

発生確率もしていできますが、今回はこんなところです。

驚異の運だめし。大吉がでますか????