- ベストアンサー
ボタンを2回押さなければ・・・
- 趣味でJavaScriptをしている者のためのフラッシュ暗算のコードについての質問です。
- ボタンを2回押さなければ実行されない問題について教えてください。
- 要望としては、ボタンを1回押すだけで実行できるようにしたいです。
- JavaScript
- 回答数5
- ありがとう数4
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
やっぱり、まちがいはっけん！！ いまの、じぶんのけいさんのうりょくは、これがげんかい！？ ぜんかくくうはくは、はんかくに！ もうみてないだろうなぁ～～～～～ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>TEST</title> <style type="text/css"> #no { color:#f00; font-size:300px; padding: 0; margin: 0; width: 800px; height: 350px; text-align:center; border: 2px #00f solid; } </style> <body> <div id="no"> ? </div> <p> <input type="button" value="Start" onClick="Start()"> <input type="text" value="" id="kotae"> <input type="button" value="Check" onClick="Check()"> </p> <script type="text/javascript"> var intRandom = function ( min, max, len ) { var a = new Array( len ); var r = [ ]; var s = max - ( min < 0 ? -min: min ) + 1; while( len-- ) r.push( Math.floor(Math.random() * s - min) ); return r; } var Flash = function ( ) { this.init.apply( this, arguments ); }; Flash.prototype.init = (function ( ) { return function ( id, vtime, htime, ary ) { this.target = document.getElementById( id ); this.vtime = 'number' == typeof vtime ? vtime: 700; this.htime = 'number' == typeof htime ? htime: 100; return this.ary = ary; }; })(); Flash.prototype.stop = function ( ) { clearTimeout( this.tmid ); return this.setString( 'Stop!!' ); }; Flash.prototype.start = (function ( ) { return function ( ) { this.setString( 'Start!!' ); this.max = this.ary.length; this.mode = false; this.tmid = null; this.cnt = 0; setTimeout( (function(that){ return function(){ that.loop() }})(this), 500); }; })(); Flash.prototype.setString = (function ( ) { return function ( str ) { return this.target.firstChild.nodeValue = 'undefined' == typeof str ? '': str + ''; }; })(); Flash.prototype.loop = (function ( ) { return function ( ) { var t = '?'; if( this.max >= this.cnt ) { t = ( this.mode = ! this.mode ) ? '': this.ary[ this.cnt++ ]; this.tmid = setTimeout( (function(that){ return function(){ that.loop() }})(this), this.mode ? this.htime: this.vtime ); } this.setString( t ); }; })(); Flash.prototype.getTotal = (function ( ) { return function ( ) { var t = 0, c = this.max, n; while( c ) t += this.ary[ --c ]; return t; }; })(); Flash.prototype.setData = (function ( ) { return function ( ary ) { return this.ary = ary; }; })(); Flash.prototype.check = (function ( ) { return function ( total ) { return total == this.getTotal(); }; })(); var mondai = new Flash( 'no', 500, 100); function Start( ) { document.getElementById( 'kotae' ).value = ''; mondai.setData( intRandom( 0, 10, 10) ); mondai.start( ); } function Check( ) { var t = document.getElementById( 'kotae' ); t.value = mondai.check( t.value ) ? "正解": mondai.getTotal(); } </script>
その他の回答 (4)
- babu_baboo
- ベストアンサー率51% (268/525)
いか、しゅうせいしたやつ。 var intRandom = function ( min, max, len ) { var a = new Array( len ); var r = [ ]; var s = max - min + 1; while( len-- ) r.push( Math.floor(Math.random() * s + min ) ); return r; }
- babu_baboo
- ベストアンサー率51% (268/525)
さらにみすはっけん。 minがまいなすだと、だめだ～
- babu_baboo
- ベストアンサー率51% (268/525)
たいまーにもじれつをわたすのは、やめよう～！ ぼけぼうしとおもって、じぶんのためにかいてみた。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>TEST</title> <style type="text/css"> #no { color:#f00; font-size:300px; padding: 0; margin: 0; width: 800px; height: 350px; text-align:center; border: 2px #00f solid; } </style> <body> <div id="no"> ? </div> <p> <input type="button" value="Start" onClick="Start()"> <input type="text" value="" id="kotae"> <input type="button" value="Check" onClick="Check()"> </p> <script type="text/javascript"> var intRandom = function ( min, max, len ) { var a = new Array( len ); var r = [ ]; var s = max - ( min < 0 ? -min: min ); while( len-- ) r.push( Math.floor(Math.random() * s - min) ); return r; } var Flash = function ( ) { this.init.apply( this, arguments ); }; Flash.prototype.init = (function ( ) { return function ( id, vtime, htime, ary ) { this.target = document.getElementById( id ); this.vtime = 'number' == typeof vtime ? vtime: 700; this.htime = 'number' == typeof htime ? htime: 100; return this.ary = ary; }; })(); Flash.prototype.stop = function ( ) { clearTimeout( this.tmid ); return this.setString( 'Stop!!' ); }; Flash.prototype.start = (function ( ) { return function ( ) { this.setString( 'Start!!' ); this.max = this.ary.length; this.mode = false; this.tmid = null; this.cnt = 0; setTimeout( (function(that){ return function(){ that.loop() }})(this), 500); }; })(); Flash.prototype.setString = (function ( ) { return function ( str ) { return this.target.firstChild.nodeValue = str ? str + '': ''; }; })(); Flash.prototype.loop = (function ( ) { return function ( ) { var t = '?'; if( this.max >= this.cnt ) { t = ( this.mode = ! this.mode ) ? '': this.ary[ this.cnt++ ]; this.tmid = setTimeout( (function(that){ return function(){ that.loop() }})(this), this.mode ? this.htime: this.vtime ); } this.setString( t ); }; })(); Flash.prototype.getTotal = (function ( ) { return function ( ) { var t = 0, c = this.max, n; while( c ) t += this.ary[ --c ]; return t; }; })(); Flash.prototype.setData = (function ( ) { return function ( ary ) { return this.ary = ary; }; })(); Flash.prototype.check = (function ( ) { return function ( total ) { return total == this.getTotal(); }; })(); var mondai = new Flash( 'no', 500, 100); function Start( ) { document.getElementById( 'kotae' ).value = ''; mondai.setData( intRandom( 0, 10, 5) ); mondai.start( ); } function Check( ) { var t = document.getElementById( 'kotae' ); t.value = mondai.check( t.value ) ? "正解": mondai.getTotal(); } </script>
- OKbokuzyo
- ベストアンサー率43% (130/296)
多分色々勘違いしてると思うんだなぁ。 > timerA.timeID = setTimeout( "hyouji()", 500 ); > timerA.timeID = setTimeout( "hihyouji()", 500 ); ここ。 これって「0.5秒後にhyouji関数が呼ばれて、さらに0.5秒後にhihyoji関数が呼ばれる」って思ってない？ 正解は「0.5秒後にhyouji関数とhihyouzi関数が呼ばれる」（正確には0.5秒後にキューに登録される） hyouji関数が呼ばれて直後にhihyouzi関数が呼ばれるわけだから結果として何も動いていないように見えてるわけですな。 ２回目にボタンを押すと、ちゃんと動いている（ように見える）のは 時間差でShutudai関数が呼ばれているから。 ちょっと目を凝らしてもらえば分かると思うけど、ファイルを開き直して実行し直すたびに 「おい！」と表示されている時間が短かったり、長かったりするはず。 あるいは何度もボタンを繰り返し押していれば、そのうちほぼ「おい！」としか表示されなくなるだろうね。 修正するなら単純に timerA.timeID = setTimeout( "hyouji()", 500 ); timerA.timeID = setTimeout( "hihyouji()", 1000 ); とすれば良いんだけど‥。 > timerA.timeID = null; これはいったい何をやりたいのだろう？ タイマーをストップさせたいならclearTimeoutを使わないといけない。 あと、ボタンを押す度に新しくスレッドが作られるのは良くないので clearIntervalをちゃんと使おう。 それから余談だけどもjavascriptにおいてnewを使うのは極力避けた方が良い。 new処理は異常に遅いからね。 javascriptでオブジェクト指向がいまいち流行らないのは そのへんが理由なんですな。
お礼
お礼が遅れてしまってもうしわけありません setTimeout("hihyouji()", 1000)にしたら、うごいてくれました。 ところで、clearInterval を記述する場所がよくわからないので、よろしければおしえていただけないでしょうか とにかく、貴重な時間を割いてのアドバイス、ありがとうございました
お礼
お礼が遅れて申し訳ありません コードをオブジェクトで記述していただき、とても、参考になると思います。力不足で、プロパティなどについて、よくわからないところもありますが、ネットで調べてみようと思います。 貴重な時間を割いてのアドバイスありがとうございました。