- ベストアンサー
画像をランダムな座標に一定の時間で表示する方法
javascript勉強中の65歳の初心者です 画像を乱数で得た座標に一定の時間で表示したいと次の通り試行錯誤していますが、どうも最初の1個は表示されますが配列の2番目以降表示されません。 初歩的な質問で恐縮ですがご指導お願いします。 <html> <head> <title>テスト表示</title> </head> <body onload= "set()"> <script language="JavaScript"><!-- sx = new Array(); sy = new Array(); num = 20; var timer; var n; var i; var m; n = 0; function set(){ for (m=0; m<num; m++) { sx[m] = Math.floor(Math.random()*800); sy[m] = Math.floor(Math.random()*600); } setInterval("uncohyouji()", 2000); } function uncohyouji(){ styl = "<img src='unco1.gif'style='position:absolute;"; document.write(styl+sx[n]+"px;left:"+sy[n]+"px;' name='unco1"+n+"'>"); n++; }
- tenikiti03
- お礼率100% (5/5)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
ソースを落として実験したら原因が分かりました。 uncohyouji() で、document.write() してますよね。 これは、ドキュメントを真っ白にして書き込むという命令なので、 真っ白にした瞬間に、スクリプトも消えてしまうわけです。 その証拠に、 uncohyouji()内で、 write()したあとに、 alert(); を書いて実行すると、 1回しか表示されません。 よって、writeは、使ってはいけないことになります。 回避策は2つあります。 ひとつは、 <img>に、id="img"という属性を書き、 document.getElementById('img').style.left=sy[n]+'px'; document.getElementById('img').style.top=sx[n]+'px'; とやるか、 document.body.innerHTML="<img src..... とやるかのどちらかです。
- 参考URL：
- http://n.chu.in/1/click.html
その他の回答 (1)
- k0021
- ベストアンサー率26% (32/120)
set() を uncohyouji() に変更したら
お礼
k0021さん有難うございます その方法で試行しました。、そこで、直接乱数発生させて表示させようと思いましたが、結果は同じでした。 私の考えは。先に乱数を発生させて、配列に格納 し、setintervalで表示させようとしています。 方法が誤りか 書き方が誤りか悩んでいます。 宜しくお願いします
関連するQ&A
- 特定のものにだけスクリプトを有効にする
今晩は。JavaScript初心者です。 今、雪を降らせるスクリプトを作っています。 外部のjsファイルに記述したスクリプトを、特定のidを付けたdivにだけ有効にしたいです。 -----html------------------------------ <html> <head> <script type="text/javascript" src="js/snow.js"></script> </head> <body> <div id="snow"> </div> </body> </html> -----JavaScript(snow.js)------------------------------ sx = new Array(); sy = new Array(); sp = new Array(); num = 50; scrnx = 100; scrny = 500; function snowWrite() { styl = "<img src='snow.gif' style='position:relative;width:6px;height:6px;z-index:3;top:"; for (i=0; i<num; i++) { sx[i] = Math.floor(Math.random()*100); sy[i] = Math.floor(Math.random()*500); sp[i] = Math.floor(Math.random()*5) + 1; document.write(styl+sy[i]+"px;left:"+sx[i]+"px;' name='snow"+i+"'>"); } } function moveSnow() { for (i=0; i<num; i++) { sy[i] += sp[i]; if (sy[i] > scrny) sy[i] = -10; document.images["snow"+i].style.top = sy[i]; } } snowWrite(); 「document.getElementById」あたりかなと思ったのですが、それだとして（まったく見当違いかもしれませんが）、どこにどう記述してよいのかわかりません。 ご存知の方がいらっしゃいましたら、ご教授いただきたいです。 よろしくお願い致します。
- 締切済み
- JavaScript
- 複数枚画像を表示して一定時間で切り替える方法
画像を表示して一定時間で切り替える方法は別ページに記載されているものをみて出来たのですが、最初に複数枚表示してて、その画像を定時間で切り替えたいのですがご教授願います。 以下別質問で見つけたもの <!-- これを画像を張りたい位置に挿入。<body>～</body>内 --> <script type="text/javascript"> /* 設定部分 */ var interval = 3000; //切り替わる時間（1000=1秒） var imgs = new Array(); var hrefs = new Array(); imgs[0] = new Image(); imgs[0].src = "http://www.xxxxx.net/images/img-main/pake/013.jpg"; hrefs[0] = "http://www.xxxxx.net/moviepages/130923_707_01/index.html"; imgs[1] = new Image(); imgs[1].src = "http://www.xxxxx.net/images/img-main/pake/014.jpg"; hrefs[1] = "http://www.xxxxx.net/moviepages/130906_701_01/index.html"; imgs[2] = new Image(); imgs[2].src = "http://www.xxxxx.net/images/img-main/pake/015.jpg"; hrefs[2] = "http://www.xxxxx.net/moviepages/130830_698_01/index.html"; /* プログラム部分 */ var num = Math.floor(Math.random()*imgs.length); document.write('<a href="'+hrefs[num]+'" id="cth"><img src="'+imgs[num].src+'" id="cti" style="border:0" /></a>'); var cti = document.getElementById("cti"); var cth = document.getElementById("cth"); setInterval(function(){ num += Math.floor(Math.random()*(imgs.length-1))+1; if(num>=imgs.length) num -= imgs.length; cti.src = imgs[num].src; cth.href = hrefs[num]; },interval); </script> <!-- ここまで --> script初心者でよくわかりません＞＜
- 締切済み
- JavaScript
- 雪が降るようなスクリプト
<html> <head> <title>*****</title> <script language="JavaScript"> <!-- function MM_preloadImages() { 以下略 } //--> </script> </head> <body bgcolor=onLoad="MM_preloadImages('images/pic.gif', 以下略)"> 以下略 </body> </html> もともと、上の様なHTMLファイルがあり、そこに雪が降っているようなJavaScriptを入れたいんです。 その雪が降るJavaScriptの以下のサンプルは、Web上で見つけました。 ***** <script type="text/javascript"> <!-- sx = new Array(); sy = new Array(); sp = new Array(); num = 30; //降らせる雪の数 scrnx = 600; //雪の降る範囲：横 scrny = 400; //雪の降る範囲：縦 function snow() { styl = "<img src='snow.gif' style='position:absolute;width:8px;height:8px;top:"; for (i=0; i<num; i++) { sx[i] = Math.floor(Math.random()*600); sy[i] = Math.floor(Math.random()*400); sp[i] = Math.floor(Math.random()*5) + 1; document.write(styl+sy[i]+"px;left:"+sx[i]+"px;' name='snow"+i+"'>"); }} function move() { for (i=0; i<num; i++) { sy[i] += sp[i]; if (sy[i] > scrny) sy[i] = -10; document.images["snow"+i].style.top = sy[i]; }} // --> </script> </head> <body bgcolor="#000000" onLoad="setInterval('move()',100)"> <script type="text/javascript"> <!-- snow(); // --> </script> ***** 例えばもともとOnLoadというスクリプトがあるのですが、そこに別の（雪の）OnLoadはどのように記述したらいいのでしょうか。そういうことが分からないので、haed部分と、body部分に雪の降るスクリプトをどのように入れ込んだらいいのか分からないので教えてください。
- ベストアンサー
- JavaScript
- 画像のランダム表示でサイズを指定する方法
ヘッダー画像を、下記のコードでランダム表示しています。 横2000px縦1000pxの画像を、横1000px縦500pxで表示したい場合、どのようにすればよいでしょうか？ <script language="JavaScript"> var imglist = new Array( "A.jpg" , "B.jpg" , "C.jpg" , "D.jpg" , "E.jpg" ); var selectnum = Math.floor((Math.random() * 100)) % imglist.length; var output = "<img src=" + imglist[selectnum] + ">"; document.write(output); </script> <noscript> <img src="A.jpg" alt="A.jpg" width="1000px" height="500px" border="0" /> </noscript> 上記コードの参照元：http://allabout.co.jp/gm/gc/23805/2/
- ベストアンサー
- JavaScript
- ランダムURL表示&被らないようにしたいです！
window.onload = function(){ var nice_a = 3; var nice_b = 3; var nice_c = 3; var nice_d = 3; var ifm_3 = document.getElementById('nice_1');//1つめ var ifm_4 = document.getElementById('nice_2');//2つめ var ifm_5 = document.getElementById('nice_3');//3つめ var ifm_6 = document.getElementById('nice_4');//4つめ var urls_random_1 = Math.floor( Math.random() * nice_a ); var urls_random_2 = Math.floor( Math.random() * nice_b ); var urls_random_3 = Math.floor( Math.random() * nice_c ); var urls_random_4 = Math.floor( Math.random() * nice_d ); var urls_nice_1 = new Array(); var urls_nice_2 = new Array(); var urls_nice_3 = new Array(); var urls_nice_4 = new Array(); /*1*/ urls_nice_1[0] = 'niceStore/niceStore_1.html'; urls_nice_1[1] = 'niceStore/niceStore_2.html'; urls_nice_1[2] = 'niceStore/niceStore_3.html'; /*2*/ urls_nice_2[0] = 'niceStore/niceStore_1.html'; urls_nice_2[1] = 'niceStore/niceStore_2.html'; urls_nice_2[2] = 'niceStore/niceStore_3.html'; /*3*/ urls_nice_3[0] = 'niceStore/niceStore_1.html'; urls_nice_3[1] = 'niceStore/niceStore_2.html'; urls_nice_3[2] = 'niceStore/niceStore_3.html'; /*4*/ urls_nice_4[0] = 'niceStore/niceStore_1.html'; urls_nice_4[1] = 'niceStore/niceStore_2.html'; urls_nice_4[2] = 'niceStore/niceStore_3.html'; ifm_3.src = urls_nice_1[s];//1 ifm_4.src = urls_nice_2[s];//2 ifm_5.src = urls_nice_3[s];//3 ifm_6.src = urls_nice_4[s];//4 } </script> 求める結果：ページをロードする度、それぞれのiframe内のURLがランダムで選定され 尚かつURLが被らないようにしたいです。 上記の内容で記述しますと、あたりまえですが表示されるURLが被ってしまいます。 これを回避したいのですがどうがご教授願いします。m(_ _)m
- ベストアンサー
- JavaScript
- かぶらないランダム画像
こんにちは。 現在ランダムに画像表示＋画像毎に各リンク＋マウスオーバーで画像切り替え を下記スクリプトで行っております。 function randomImage1() { img = new Array(); img[0] = "photo1.gif"; img[1] = "photo2.gif"; img[2] = "photo3.gif"; img[3] = "photo4.gif"; n = Math.floor(Math.random()*2); url = 'URL1 URL2'.split(' '); document.write('<a href="'+url[n]+'" target="_top"><img src="'+img[n]+'" border="0" onMouseOver="this.src=\''+img[n-0+2]+'\'" onMouseOut="this.src=\''+img[n]+'\'" onClick="location.href=\''+url[n]+'\'"></a>'); } ここで相談です。さらにこのソースを改造して 重複しないでランダムに画像表示させたいのですが、 どこをどう改造すれば良いかアドバイス宜しくお願い致します。
- ベストアンサー
- JavaScript
- 画像のランダム表示
初心者です。。 画像のランダム表示で、下のものを使っているのですが、 画像の上にカーソルをもっていったときに手のマークにしたいのですが、 どのようにすればできるのでしょうか？ onclickを使っているからだと思うのですが、 A href=を使えばできるのでしょうか？ よろしくお願いします。 <script type="text/javascript"> <!-- var imgs = new Array; var n = 5; var i; for(i=0;i<n;i++){ imgs[i] = new Image(); } imgs[0].src="image/001.jpg"; imgs[1].src="image/002.jpg"; imgs[2].src="image/003.jpg"; imgs[3].src="image/004.jpg"; imgs[4].src="image/005.jpg"; function disp(img){ img.src=imgs[Math.round(Math.random()*(n-1))].src; } //--> </script> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> </head> <body> <div align="center"> <img src="image/001.jpg" border="0" onclick="disp(this)"> </div> </body> </html>
- ベストアンサー
- JavaScript
- 画像リンクをランダムに４つ表示する
このようなタグを使って、画像リンクのランダム表示を作成しました。 ((hard内)) <script type="text/javascript"><!-- // var imglist = [ [ "画像1", "", "リンク先1" ] , [ "画像2", "", "リンク先2" ] ]; function RandomImageLink() { // var selectnum = Math.floor(Math.random() * imglist.length); // var output = '<a href="' + imglist[selectnum][2] + '">' + '<img src="' + imglist[selectnum][0] + '"' + ' alt="' + imglist[selectnum][1] + '"><br>' + imglist[selectnum][1] + '</a>'; // document.write(output); } // --></script> ((body内)) <script type="text/javascript"><!-- RandomImageLink(); // --></script> こうしてランダムに表示できるようになったのですが、私は『ランダムに1つ表示』ではなく、『ランダムに4つ表示』にしたいのです。 …どうすればいいのでしょうか？ どなたか回答をお願いします。
- ベストアンサー
- JavaScript
- 特定の時間に複数のメッセージからアットランダムに表示する
１ 特定の時間（たとえば、朝の７時から８時まで）に２ 複数のメッセージ（たとえば、どこかのページへのリンク）の中からランダムに表示するジャバスクリプトを作りたいと思っています。 １と２は別個のスクリプトがあるのですが、これを統合すればいいのでは、と思ってやっているのですが、わかりません。なにとぞ宜しくお願いいたします。 ================= １ mes=new Array(24); mes[0]=""; mes[1]=""; //略 mes[23]=""; function timer(){ myDate=new Date(); myTime=myDate.getHours(); document.write(mes[myTime]); } timer(); //--> ２ var quotes=new Array() quotes[0]='メッセージかリンク' var whichquote=Math.floor(Math.random()*(quotes.length)) document.write(quotes[whichquote])
- ベストアンサー
- JavaScript
- 外部JSファイルでランダム表示と一度クリックで2箇所リンクのものを組み合わせたいんです。
初心者で申し訳ありません。 外部JSファイルでランダム表示をつかっているのですが、リンクの箇所で一回のクリックで2箇所にリンクするのを組み合わせたいと思ってます。 ランダム表示 <!-- //並べ替え表示スクリプト function Random(x) { //fは掲載する広告数 f =3; var Num = new Array(f - 1); var Chk = new Array(f - 1); var Mess = new Array(f - 1); //***ここに広告表示HTMLの配列作成 Mess[0] = ' <A href="http://aa.com" target="_blank">testtest</A>'; Mess[1] = ' <A href="http://bb.com" target="_blank">testtest</A>'; Mess[2] = ' <A href="http://cc.com" target="_blank">testtest</A>'; //***ランダムで０～ｆ－１の値を並べ替え for (i=0;i<f;i++) // { Num[i] = Math.floor(Math.random()*f); if (Chk[Num[i]] == 1){ while(Chk[Num[i]] == 1){ Num[i] = Math.floor(Math.random()*f); } Chk[Num[i]] = 1; } else { Chk[Num[i]] = 1; } } //ＨＴＭＬ作成部分 for (i=0;i<x;i++) // { document.write(Mess[Num[i]]); document.write(Mess[Num[i+1]]); document.write(Mess[Num[i+2]]); } } //--> 上のランダムに出力されるリンクを下のような形みたいに、それぞれのURLが１クリックで2箇所リンクされるようにしたいです。 <A href="http://aa.com" target="_blank" onclick="window.open('http://dd.com')" >test</A> もしお分かりの方がいたら何卒よろしくお願いします。 もしわかりづらかったらごめんなさい。
- ベストアンサー
- JavaScript
お礼
nipox さん有難うございます。 document.writeの意味を理解せずにいました。 初歩的な質問に適切な回答を頂き感謝しています。 今後とも宜しくお願いします。