- ベストアンサー
javascriptについて
javascriptについて 画像をイベントハンドラのonClickを使ってランダムに表示したいんですけど、どうしても出来ません。 buttonで作ったスタートボタンを押す→画像がランダムに表示される。 buttonで作ったストップボタンを押す→ランダムに表示していた画像が止まる。 これを３枚の画像を使って、スロットのようにしたいです。 また３枚の画像で、スロットを３つにして、同時にスタート（ストップ含め）させる方法はありませんか？
- ヤマト（@yamatolove）
- お礼率54% (26/48)
- JavaScript
- 回答数2
- ありがとう数0
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
ご参考まで 画像の数は自由（2以上）対象の数も自由で個別に制御可 文字数制限のため説明は略（コメント文参照） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>test</title> <style type="text/css"> div.test {width:200px;float:left;text-align:center;} div.test img {width:150px;height:150px;} div.test input {width:5em;} </style> </head> <body> <div class="test"> <img id="img1" src="A.jpg" alt=""><br> <input type="button" id="start1" value="start"><br> <input type="button" id="stop1" value="stop"> </div> <div class="test"> <img id="img2" src="A.jpg" alt=""><br> <input type="button" id="start2" value="start"><br> <input type="button" id="stop2" value="stop"> </div> <script type="text/javascript"> <!-- (function(){ var chg=function(u,t,spd){ this.count=""; this.url=u; this.target=t; this.speed=spd; this.tid=null; } var chg_move=function(){ var c=this.count; while(c==this.count)c=Math.floor(Math.random()*this.url.length); this.count=c; this.target.src=this.url[c]; } var chg_start=function(){ if(!this.tid)this.tid=setInterval(set(this,"move"),this.speed*1000); } var chg_stop=function(){ if(this.tid)clearInterval(this.tid); this.tid=null; } var creater=function(id,start,stop,speed,str,option){ var u=str.split(","),t=document.getElementById(id); var s=document.getElementById(start),e=document.getElementById(stop); if(u.length<2||!t||!s||!e||!speed)return; var obj=new chg(u,t,speed); try{ s.addEventListener("click",set(obj,"start"),false); e.addEventListener("click",set(obj,"stop"),false); }catch(err){ s.attachEvent("onclick",set(obj,"start")); e.attachEvent("onclick",set(obj,"stop")); } if(option)chg_start.call(obj); } function set(obj,func){ var f={start:chg_start,stop:chg_stop,move:chg_move}[func]; return function(){f.call(obj);}; } IChanger=creater; })(); //IChanger(target id,starter id,stopper id,change speed(sec),csv of src,start option) IChanger("img1","start1","stop1",1,"A.jpg,B.jpg,C.jpg",1) IChanger("img2","start2","stop2",1.5,"A.jpg,D.jpg,E.jpg,F.jpg") //--> </script> </body> </html>
その他の回答 (1)
- yyr446
- ベストアンサー率65% (870/1330)
「javascript スロットマシーン」のキーワードで、Google検索すると、 いくらでもサンプルが見つかります。 http://www.red.oit-net.jp/tatsuya/java/kuji3.htm http://www.johoka.net/slot/javascriptslot.htm http://www.wind.sannet.ne.jp/alfix/javascript/etc/2.html http://www.bb.em-net.ne.jp/~okayama/j-tako/seal/games/slot/slot.html ・・・・・ 限が無い
