下記ページで背景をランダム表示させているのですが、
ieitsu.jugem.jp
何度か読み込んでみると、真っ白になるときがあります。
javascriptの書き方に問題があるのでしょうか?
何のせいでしょうか?
よろしくお願いします
myimg=myimgs[Math.floor(Math.random()*(myimgs.length+1))];
この+1は不要です。
真っ白になっていたのは、myimgs[4]という存在しない要素(undefined)をbackgroundに設定してしまっていたからです。
myimgsは、添え字0~3の4つの要素を持っており、myimgs.lengthは要素数である4を返します。
算出したいランダムな数値は0~3ですので、Math.floor(Math.random() * myimgs.length)で十分です。
http://q.hatena.ne.jp/1279806968 <- dummy
HPを拝見させていただきました。
<script type="text/javascript"> </p> <p><!--</p> <p>myimgs=Array();</p> <p>myimgs.push("<a href="http://members.jcom.home.ne.jp/unagiinu/moto/1983786a.jpg" target="_blank">http://members.jcom.home.ne.jp/unagiinu/moto/1983786a.jpg</a>");</p> <p>myimgs.push("<a href="http://members.jcom.home.ne.jp/unagiinu/moto/e93cb658.JPG" target="_blank">http://members.jcom.home.ne.jp/unagiinu/moto/e93cb658.JPG</a>");</p> <p>myimgs.push("<a href="http://members.jcom.home.ne.jp/unagiinu/moto/20100722_154714.jpg" target="_blank">http://members.jcom.home.ne.jp/unagiinu/moto/20100722_154714.jpg</a>");</p> <p>myimgs.push("<a href="http://members.jcom.home.ne.jp/unagiinu/moto/7c31dff6.jpg" target="_blank">http://members.jcom.home.ne.jp/unagiinu/moto/7c31dff6.jpg</a>");</p> <p>myimg=myimgs[Math.floor(Math.random()*(myimgs.length+1))];</p> <p>document.write("<sty"+"le>");</p> <p>document.write("body{background:url("+myimg+");}background-repeat: no-repeat;background-attachment:fixed;background-position:;}");</p> <p>document.write("</sty"+"le>");</p> <p>// --></p> <p></script>
ですが、
myimg=myimgs[Math.floor(Math.random()*(myimgs.length+1))];
ここがおかしいですね。
myimg=myimgs[Math.floor(Math.random()*(myimgs.length))+1];
ではないでしょうか?
ランダムの数値の生成方法に誤りがあります。
生成された数値が4になると、画像が読み込めずに真っ白になっています。
画像を格納する配列が、0番目、1番目、2番目、3番目の計4つしかないにもかかわらず
無いはずの「4番目」を指定しているのがこの現象の原因です。
■修正前
Math.floor(Math.random()*(myimgs.length+1))
■修正後
Math.floor(Math.random()*(myimgs.length))
myimg=myimgs[Math.floor(Math.random()*(myimgs.length+1))];
この部分のロジックがおかしい。
なぜ "myimgs.length+1" なのか?
コメント(0件)