- ベストアンサー
JavaScript setTimeout メソッドの使い方を教えてください。
三つの画像をそれぞれ違った場所にsetTimeoutを設定して数秒差をつけて表示するスクリプトを教えていただけませんか。（例えばテーブルのセルごとに表示する） 一度時間差で表示されればそのままでいいのです。 マウスイベントは使いたくないのです。 一つの画像がタイム差でチェンジするものはよく見かけるのですが・・・。
- T_kumi
- お礼率64% (9/14)
- JavaScript
- 回答数5
- ありがとう数5
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (4)
- arenani_sorenani
- ベストアンサー率73% (58/79)
ちょっといじりました。 こんな感じですか・・・・ <html> <head> <title></title> <script language="JavaScript"> <!-- src1="http://oshiete1.goo.ne.jp/images/goo.gif"; src2="http://www.goo.ne.jp/img/season/hikari_taxi.gif"; function xx(obj,time){ setTimeout(function(){obj.style.visibility='visible'},time); } //--> </script> <body> <table> <tr> <td> <a href="http://www.goo.ne.jp/" onMouseOver="img1.src=src2" onMouseOut="img1.src=src1"> <img name="img1" border="0" src="http://oshiete1.goo.ne.jp/images/goo.gif" style="visibility:hidden" onload="xx(this,2000)" /></a> </td> <td> <a href="http://www.goo.ne.jp/" onMouseOver="img2.src=src2" onMouseOut="img2.src=src1"> <img name="img2" border="0" src="http://oshiete1.goo.ne.jp/images/goo.gif" style="visibility:hidden" onload="xx(this,4000)" /></a> </td> <td> <a href="http://www.goo.ne.jp/" onMouseOver="img3.src=src2" onMouseOut="img3.src=src1"> <img name="img3" border="0" src="http://oshiete1.goo.ne.jp/images/goo.gif" style="visibility:hidden" onload="xx(this,6000)" /></a> </td> </tr> </table> </body> </html>
お礼
だんだん難しくなってきましたが、何となくわかります。image にnameを付けて処理するのですね。 setTimeout(function(){obj.style.visibility='visible'},time); ↑この記述はむずかしいです。 でもいろいろありがとうございさした。
補足
回答No,4のscript を実行してみました セルの中に入れる画像をそれぞれ違ったものにすると、 マウスイベントが無効になってしまいます。 src1,src2 をそれぞれ6まで指定し、name もimg6まで指定やればいいのでしょうか？
- arenani_sorenani
- ベストアンサー率73% (58/79)
以下のようにもできます。 <html> <script> function xx(obj,time){ setTimeout(function(){obj.style.visibility='visible'},time); } </script> <body> <table><tr> <td><img src="http://oshiete1.goo.ne.jp/images/goo.gif" style="visibility:hidden" onload="xx(this,2000)" /></td> <td><img src="http://oshiete1.goo.ne.jp/images/goo.gif" style="visibility:hidden" onload="xx(this,4000)" /></td> <td><img src="http://oshiete1.goo.ne.jp/images/goo.gif" style="visibility:hidden" onload="xx(this,6000)" /></td> </tr></table> </body> </html>
お礼
なるほど！ 最初にfunction xx にメソッドを書いてやり、 後はbody 内でonloadするのですね。 これだとimageにマウスイベントがつけられるかも知れません。 JavaScript辞典と格闘してみます。 本当にありがとうございます。
補足
マウスイベントの追加はコレでいいでしょうか <html> <head> <title></title> <script language="JavaScript"> <!-- function xx(obj,time){ setTimeout(function(){obj.style.visibility='visible'},time); } //--> </script> <body> <table> <tr> <td><img src="http://oshiete1.goo.ne.jp/images/goo.gif" style="visibility:hidden" onload="xx(this,2000)" /></td> <td><img src="http://oshiete1.goo.ne.jp/images/goo.gif" style="visibility:hidden" onload="xx(this,4000)" /></td> <td><img src="http://oshiete1.goo.ne.jp/images/goo.gif" style="visibility:hidden" onload="xx(this,6000)" /></td> <td><a href="#" onMouseOver = "window.document.next.src='a_2.gif'" onMouseOut = "window.document.next.src='a_1.gif'"> <img src="a_1.gif" name="next" border="0" style="visibility:hidden" onload="xx(this,8000)" /></a></td> </tr> </table> </body> </html>
- arenani_sorenani
- ベストアンサー率73% (58/79)
- arenani_sorenani
- ベストアンサー率73% (58/79)
サンプルを書きました。 こんな動きでよいのでしょうか・・ <html> <head> <script> src1="http://oshiete1.goo.ne.jp/images/goo.gif" function start(){ setTimeout("xx()",2000); } function xx(){ td1.innerHTML="<img src="+src1+">"; setTimeout("yy()",2000); } function yy(){ td2.innerHTML="<img src="+src1+">"; setTimeout("zz()",2000); } function zz(){ td3.innerHTML="<img src="+src1+">"; } </script> </head> <body onload="start()"> <table><tr> <td id="td1"> </td> <td id="td2"> </td> <td id="td3"> </td> </tr></table> </body> </html>
お礼
サンプルありがとうございました 早速実行しました。 それぞれ違った画像を使いたい場合は、最初にsrc1="" src2="" src3="" と読みこんで置けばいいのですね 試してみたら、ちゃんと出来ました。うれしいです。 私が見たサイトのものは、時間差で表示された画像に、尚かつロールオーバーのイベントが付いていました。 body 内に記述するonMouseOver onMouseOutのタグは解るのですが、スクリプト内の記述は難しいそうですね。
関連するQ&A
- window.setTimeoutについて
window.setTimeout - 指定秒後に処理を実行で、たとえばyahooのホームページを表示した5秒後に、googleのホームページを表示するにはどういうスクリプトにしたら良いですか？お願いします。 java script 初心者で、いきなり壁にぶち当たったのでよろしければ御教えください。
- 締切済み
- JavaScript
- SetTimeoutの無効化について
Flash初心者ですが、よろしくお願いします。 SetTimeoutを使って、30秒たつと別のシーンにとぶように設定したswfを作っています。 配置しているボタンを押した時など、30秒たつ前にシーンが変わった場合、SetTimeoutの設定を無効にしたいのですが、どうすればよいでしょうか？ 現在のスクリプトは以下のようになっています。 onClipEvent (load) { var id = setTimeout(go, 30000); stop(); function go() { clearTimeout(id); gotoAndPlay("シーン 3", "timeover"); } } 色々検索してみましたがわかりません・・・ どなたか分かる方がいらっしゃればご教授お願いします>_<
- 締切済み
- Flash
- setTimeout()がうまくいきません
以前、時計を一秒一秒、新しい絵を読み込んで バー表示型の時計を作ろうとしていた者ですが なんとか、１つの画像を連続表示させて 一本のバーにしていくスクリプトを 下記のように作りました そうしたところ、手動で更新をすると、うまく動作するのですが 自動で更新していこうと思いsetTimeout()を入れたのですが うまく動作してくれません。どのようにしたらよいのでしょうか <html> <head> <script language="JavaScript1.1"> <!-- function timesec() { var now = new Date() var s = now.getSeconds() var x = 60-s for(gj=0;gj<x;gj++) { var no = gj+1*x document.write("<img src='sec_1.gif' NAME='Name"+no+"'>") } } //--> </script> </head> <body> <script language="JavaScript1.1"> <!-- timesec() ----> </script> </body> </html>
- ベストアンサー
- JavaScript
- setTimeoutを使用して文字を表示させたい
おたずねします。 まだまだ初心者で、練習用に以下のようなプログラムを書いたのですが、うまく動きません。 やりたいことは「あいうえお」の文字を順番に、規定の時間（1秒ずつ表示時間を長くして）表示させるものです。 <script language="javascript"> mozi= new Array(); mozi[0]=("あ"); mozi[1]=("い"); mozi[2]=("う"); mozi[3]=("え"); mozi[4]=("お"); time= new Array(); time[0]=(1000); time[1]=(2000); time[2]=(3000); time[3]=(4000); time[4]=(5000); var menu=0; function aaa(){ document.write(mozi[menu]); timerID = setTimeout("aaa()",time[menu]); if(menu == mozi.length-1){ menu=0; }else{ menu++; } } </script> <body> <script language=javascript> <!-- aaa(); //--> </script> </body> どうしても「あ」→「い」のあとで動作がループのように固まってしまします。 このプログラムの順番がどのように動いて、 [menu]内の変数の増え方がどのようになっているのかが よくわからず困っています。 他にも別の記述方法はいろいろあると思うのですが、 できればこのプログラムを修正する形で御指摘いただきたいのですが。 どうぞよろしくお願いいたします。
- ベストアンサー
- JavaScript
- setTimeoutで引数を配列にできるか
画面全体に50行×50列くらいのtd（背景色がピンク）を持ったtableを配置し、それぞれのtdにマウスが乗ったらそのtdの背景色を青くして、マウスがtdの外に出たら1秒後にピンク色に戻すものを作ろうと思ってます。つまり、tdを画素に見立てた簡単なペイントに似たものを作ろうということです。 そのために以下のjavascriptを書きました。 window.onload = function(){ td = document.getElementsByTagName("td"); for(i=0;i<td.length;i++){ td[i].onmouseover = ChCo; td[i].onmouseout = setTimeout("ClCo('"+td[i]+"')",1000); } function ChCo(){ this.style.backgroundColor = "blue"; } function ClCo(hoge){ hoge.style.backgroundColor = "pink"; } } この場合、onmouseoverの青くするところはうまくいくのですが、onmouseoutのsetTimeoutのところがうまくいきません。どうも、setTimeoutに設定したClCoの引数がうまく渡ってないような感じなのですが、どこが間違っているのでしょうか。
- ベストアンサー
- JavaScript
- setTimeOutとsetInterval、どっちが良いのか
最近、あらゆるところで動的なアニメーションを見ます。 例えば情報を表示するのにイーズイン・イーズアウトしたり画像をフェードさせたりといった視覚効果上のアクセント的に使われるものです。 これらはほんの短い間だけsetTimeOutかsetIntervalで関数を何度も実行して実現させていますが、この両者はどちらの方が優れているのでしょうか？ プロのサイト数箇所でソースを覗いてみましたが、なぜかどこもsetTimeOutを使っていました。setIntervalではいけない理由があるのでしょうか？自分で実験してみたところ、両者に処理速度の差はほとんど見られませんでした（そのごくわずかな違いについて言えばいつもせｔTimeOutが勝ちますが）。
- ベストアンサー
- JavaScript
- JavaScriptのタイマーについて
JavaScriptのタイマーについて上手く動作しないので質問させて頂きます。 ＜仕様＞ ３秒後に「aaa」のメッセージを表示させる。 ５秒後に「aaa」のメッセージを表示させる。 ＜現在の状況＞ ３秒後に「aaa」のメッセージを表示し、その後は応答なし。 ＜ソース＞ 以下を参照ください。何が悪いのでしょうか？ <HTML> <HEAD> <SCRIPT Language="JavaScript"> <!-- timerID = 10; function func() { alert("aaa"); } function init() { timerID = setTimeout("func()", 3000); timerID = setTimeout("func()", 5000); } // --> </SCRIPT> </HEAD> <BODY onload="init()"> </BODY> </HTML>
- ベストアンサー
- JavaScript
- setTimeoutあるいはsetIntervalの限界
いつもお世話になっています。 タイマーの実験をしてみようかと思い、タイマー関数のサンプルをちょっと触ってみて、気になることがありました。 スクリプトとしては、次のようなものです。 <HTML> <HEAD> <SCRIPT Language="JavaScript"> <!-- timerID = 10; count = 0; function timerX(){ status = "Counter is " + count++; } function clr(){ clearInterval(timerID); } // --> </SCRIPT> <BODY bgColor="white" onLoad="timerID = setInterval('timerX()',1000);"> （以下略） このスクリプトを実行すると、1秒毎に1カウント増えていきますから、ステータスに表示される数値は10秒で10になります。 ですから、1を指定する、つまりsetInterval('timerX()',1);にすれば、論理上、10秒で10000になるはずですよね？ ところが実際にステータスに出る数値はそうはならず、かなり低い数字になってしまいます。 そこで質問なのですが、setTimeoutまたはsetIntervalでタイマーを作る場合、ミリ秒はどのくらいまで有効なのでしょうか。 ひょっとして、マシンに依存するのでまちまちなのでしょうか。 経験等でご存じの方、お教えください。
- ベストアンサー
- JavaScript
- javascriptを使って画像を切り替える
javascriptを使って画像（id="chengeImg"）を切り替えたいと思っています。 画像はsamp0.jpg～samp4.jpgの計5枚 ただ、問題があって、 画像によって移り替わる時間を変えたいんです。（一定ではない） setTimeoutの引数(time)と画像を、どう結びつければよいのかが 分からず困っています。 それぞれ、 画像0の時は5000ミリ秒 画像1の時は4000ミリ秒 画像2の時は3000ミリ秒 … と移り変わる速度を変えたいのです。 一応、timeは配列がいいのかと配列にしてみました それが良いのかどうかも定かではないのですが… どのようにすれば、時間が一定でない画像切り替えが可能になるでしょうか？ スクリプトを詳しく教えていただけると、ありがたいです。 以下、javascriptの一部を記します。 【js】ファイル(imagechange.js)------ window.onload=anime; var img=new Array(5); img[0]=new Image(); img[1]=new Image(); img[2]=new Image(); img[3]=new Image(); img[4]=new Image(); img[0].src="samp0.jpg"; img[1].src="samp1.jpg"; img[2].src="samp2.jpg"; img[3].src="samp3.jpg"; img[4].src="samp4.jpg"; //画像枚数 var num=0; //時間制御 time = new Array(5000, 4000, 3000, 3000, 3000); function anime(){ var ch = document.getElementById("changeImg"); ch.src=img[num].src; if(num<4){ num++; }else{ num=0; } setTimeout("anime()",time); } 【html】ファイル-------- <head> <title>画像切り替え</title> <script type="text/javascript" src="imagechange.js"</script> </head> <body> <p><img src="samp0.jpg" width="700" height="200" id="chengeImg"></p> </body> </html> 以上となります。 詳しい方、ぜひ教えてくださいませ。 どうぞ宜しくお願いいたします。
- ベストアンサー
- JavaScript
- javascriptのinnerHTMLを動的に書き換える方法
javascriptのinnerHTMLを動的に書き換える方法 宜しくお願い致します。 一定時間の間、innerHTMLで表示した内容を、一定時間後に動的に変更させる方法で躓いています。 以下、作ってみた内容です。 <script type="text/javascript"> <!-- //一定期間のループ処理 //ループ時間の定義 timer_handle = setInterval("time_count()",1000); //countの初期値 count = '0'; function time_count() { //HTML差し替え設定 document.getElementById('time').innerHTML = '経過時間：' + count + '秒'; //秒数のカウントアップ count = Number(count) + 1; } //5秒後に表示させる処理 setTimeout("next()",5000); function next() { //一定期間のループを解除 clearInterval(timer_handle); document.getElementById('time').innerHTML = ""; //HTML差し替え設定 document.getElementById('time').innerHTML = '処理がおわりました'; } // --> </script> </head> <body onLoad="time_count()"> <table> <tr><td> <span id="time"></span> </td></tr> </table> </body> </html> この処理を実行すると、5秒間1秒ずつのカウントが進み、5秒後にカウントが止まるだけでinnerHTMLの内容が書き換わりません。 どうすれば書き換えられるのでしょう？
- ベストアンサー
- JavaScript
お礼
識別子をそれぞれ変えてやってみていました。 詳しい説明とタグで、とてもよく納得できました。 やりたかったことが全部できました。 本当にありがとうございました。 JavaScript はとても面白いです。