テキストを繰り返し表記・非表示にする方法

前へ 次へ
このQ&Aのポイント
  • テキストを繰り返し表記・非表示にする方法について説明します。
  • setInterval()関数を使用して、一定間隔でテキストを表示し、非表示にすることができます。
  • また、テキストを隠すためにはCSSのdisplayプロパティを利用し、visibilityを切り替えることができます。
回答を見る
  • ベストアンサー

表記する処理の後に消す処理を繰り返したい

テキストのみのスライドショーを作りたいのですが、setinterval2秒後に隠していたテキストをふわっと出してそのさらに二秒後に消して、それと同時に次のテキストを出すというようにしたいです。 始めテキストをすべてhiddenで消しておいて、二秒後にvisibleで上書きして表記するというのはわかるのですが、その後さらに二秒後に消す方法がわかりません。 合計で4秒になるので4秒後に消すsetintervalを下記の下に作成しそこで同じようにループ処理を記載してhiddenで上書きすればよいのでしょうか？ https://codepen.io/anon/pen/WOroYo setInterval( function () { 表記する処理 }, 2000); が終わったら次の setInterval( function () { 消す処理 }, 2000); を実行とする方法はあるのでしょうか？

質問者が選んだベストアンサー

  • ベストアンサー
回答No.4

>settimuoutがこの処理が終わるまではこれ以降の処理に移らなければ、簡単にこの後に次の処理を記載すれば二秒後に実行とできるのですが、 >この処理を待たずに次の処理を始めてしまう場合は次の処理を二秒後に実行とできませんよね。 >仕様上どちらなのかご存知ですか？ 詳しい仕様は知りませんでした。 JavaScriptのsetIntervaｌ関数の意味を正確に理解するための１つの説明 http://d.hatena.ne.jp/mindcat/20091018/1255889695 >setInterval関数を実行したときに、「現在時刻＋第２引数で指定した時間」の時刻をタスクに付けてキューに積みます。時間が経ち、そのタスクがキューの先頭に来ると、Scriptエンジンはそのタスクを実行します。その後に、タスクの時刻を「現在時刻＋第２引数で指定した時間」の時刻に更新して再びキューに積むという動作になります。従って、setInterval関数の第１引数で指定した関数の実行に関わる時間分だけ遅れることになります。 >if(TimerCntMax<=TimerCnt){ >は二秒後に >下記を止めているのですよね。 TimerCntがTimerCntMax以上の値になった場合ですが？。 >TxtArray[ArrayPrv].style.visibility = "visible"; >TxtArray[ArrayCnt].style.visibility = "hidden"; >は消えている物を出した瞬間に、消していますが、 >よく考えると出た瞬間に消えるというので基本的には問題ないですね。 だたテキストを消すだけでなく、その１つ前のテキストを表示しています。 カウンターが違う事に注意して下さい、「ArrayCnt」が現時点のテキスト、「ArrayPrv]」が1つ前のテキストです。 >ただこれだとふわっとは出てこないのでふわっと出すためにはcssで二秒後に実行するとすれば可能ですが、 >JSではこのようなことはできないのでしょうか？ JSでcssを使う場合は下記のように「style」を付ければ良いようです。 Txt = document.getElementById('TxtID'); Txt.style.～

htmlcss123
質問者

お礼

http://d.hatena.ne.jp/amachang/20060910/1157911122 を見るとsettimeoutが10秒だった場合10秒待ってから次の処理をするわけではなく、こちらの処理はおいておいて次の処理に進むというようなことが書いてありますね。 つまりsettimeout の中の式は10秒後に実行されるがその下にある処理は１０秒後に実行されるわけではないようですね。 今回はふわっと消してふわっと出るCSSをsettimeoutで2秒間に行えばそのようになりそうですね。 TxtArray[ArrayPrv].style.visibility = "visible"; TxtArray[ArrayCnt].style.visibility = "hidden"; この二つの式が2秒ならおそらく1秒ごとに実行して合計で2秒になるのでしょうね。

その他の回答 (10)

回答No.11

>インターバルよりアニメーションの実行時間の方が長いのは やはり問題がある 現在、アニメーション(FadeIn、FadeOut)が実行されているモノを妨げないなら、インターバルよりアニメーションの実行時間の方が長くても問題ありませんでした。 「ArrayPrv」が「(TxtArray.length+ArrayCnt-2)%TxtArray.length;」(配列の2つ前)の場合、FadeIn側から見たFadeOut側との間隔は「インターバルx2」となります(つまりDelayを含めたアニメーションの実行時間がFadeOut側は「インターバルx2」以下ならFadeIn側と衝突しません)。 また その(「ArrayPrv」が「(TxtArray.length+ArrayCnt-2)%TxtArray.length;」(配列の2つ前)の)場合、FadeOut側から見たFadeIn側との間隔は「インターバルx(配列長-2)」となります（つまりDelayを含めたアニメーションの実行時間がFadeIn側は「インターバルx(配列長-2)」以下ならFadeOut側と衝突しません）。 つまり、この場合 論理的な最小の全体の間隔は「インターバルx2+FadeIn側のDelayを含めたアニメーションの実行時間」となるので、配列の要素(テキスト)は最低でも3個以上必要になります(FadeIn側のDelayを含めたアニメーションの実行時間によっては それ以上必要になります)。 「ArrayPrv」が「(TxtArray.length+ArrayCnt-1)%TxtArray.length;」(配列の1つ前)の場合、FadeIn側から見たFadeOut側との間隔は「インターバルx1」となります(つまりDelayを含めたアニメーションの実行時間がFadeOut側は「インターバルx1」以下ならFadeIn側と衝突しません)。 また その(「ArrayPrv」が「(TxtArray.length+ArrayCnt-1)%TxtArray.length;」(配列の1つ前)の)場合、FadeOut側から見たFadeIn側との間隔は「インターバルx(配列長-1)」となります（つまりDelayを含めたアニメーションの実行時間がFadeIn側は「インターバルx(配列長-1)」以下ならFadeOut側と衝突しません）。 つまり、この場合 アニメーションの計算上の(配列の)全体の最小の実行時間の間隔は「インターバルx1+FadeIn側のDelayを含めたアニメーションの実行時間」となるので、配列の要素(テキスト)は最低でも2個以上必要になります(FadeIn側のDelayを含めたアニメーションの実行時間によっては それ以上必要になります)。 下記は、「ArrayPrv」は「(TxtArray.length+ArrayCnt-1)%TxtArray.length;」(配列の1つ前)、FadeIn側のDelayを含めたアニメーションの実行時間は「0.5+1=1.5秒」、インターバル=1000(1秒)、なのでアニメーションの計算上の(配列の)全体の最小の実行時間の間隔は「2.5秒」となり、配列の要素(テキスト)は最低でも3個以上必要になります(「アニメーションの計算上の(配列の)全体の最小の実行時間の間隔<2.5秒>/インターバル<1秒>=2.5」なので、少数を繰り上げて3となる(四捨五入ではなく、あくまでも少数の繰り上げ))。 <html> <head> <!-- この辺りにmetaタグでcharsetを指定して下さい --> <style type="text/css"> <!-- .FadeInAnimaCS { color: #000; opacity: 0; } .FadeInAnimaCS { animation: FadeInAnima 1s linear 0.5s 1 forwards; } @keyframes FadeInAnima { 100% { opacity: 1; } } .FadeOutAnimaCS { color: #000; opacity: 1; } .FadeOutAnimaCS { animation: FadeOutAnima 1s linear 0s 1 forwards; } @keyframes FadeOutAnima { 100% { opacity: 0; } } --> </style> </head> <div id="HogeID"> hoge </div> <div id="YamaguchiID"> yamaguchi </div> <div id="SontakuID"> sontaku </div> <div id="HugaID"> huga </div> <div id="PiyoID"> piyo </div> <script type="text/javascript"><!-- TimerCnt = 0; TimerCntMax = 20; // Intervalの繰り返し回数の指定。 ArrayCnt = 0; TxtArray = [ document.getElementById('HogeID'), document.getElementById('YamaguchiID'), document.getElementById('SontakuID'), document.getElementById('HugaID'), document.getElementById('PiyoID') ]; HdnArray = new Array(TxtArray.length); TimerId = setInterval( function () { if((TxtArray.length-1)<ArrayCnt){ ArrayCnt = 0; } ArrayPrv = (TxtArray.length+ArrayCnt-1)%TxtArray.length; // 「ArrayCnt-1」をマイナスにならないようにする。 if(HdnArray[ArrayPrv]===true){ HdnArray[ArrayPrv] = false; // true; // TxtArray[ArrayPrv].className = "FadeInAnimaCS"; } HdnArray[ArrayCnt] = true; // false; // TxtArray[ArrayCnt].className = "FadeOutAnimaCS"; ArrayCnt++; TimerCnt++; // ここをコメントにすれば永遠に繰り返します。 // 「TimerCntMax」は「TimerCnt」より大きな値にして下さい。 if(TimerCntMax<=TimerCnt){ clearInterval(TimerId); // 「setInterval()」を解除 } }, 1000); // --></script> </html>

回答No.10

>回答No.9　amanojaku1 インターバルよりアニメーションの実行時間の方が長いのは やはり問題があるので、アニメーションの実行時間を変更します。 インターバルは「1000」に変更してあります。 ついでに「ArrayPrv = (TxtArray.length+ArrayCnt-1)%TxtArray.length;」を「ArrayPrv = (TxtArray.length+ArrayCnt-2)%TxtArray.length;」(２つ前)に変更しました。 テキストのキャラクターセットに合わせて、metaタグでcharsetを指定して下さい。 <html> <head> <!-- この辺りにmetaタグでcharsetを指定して下さい --> <style type="text/css"> <!-- .FadeInAnimaCS { color: #000; opacity: 0; } .FadeInAnimaCS { animation: FadeInAnima 1s linear 0s 1 forwards; } @keyframes FadeInAnima { 100% { opacity: 1; } } .FadeOutAnimaCS { color: #000; opacity: 1; } .FadeOutAnimaCS { animation: FadeOutAnima 1s linear 0s 1 forwards; } @keyframes FadeOutAnima { 100% { opacity: 0; } } --> </style> </head> <div id="HogeID"> hoge </div> <div id="YamaguchiID"> yamaguchi </div> <div id="SontakuID"> sontaku </div> <div id="HugaID"> huga </div> <div id="PiyoID"> piyo </div> <script type="text/javascript"><!-- TimerCnt = 0; TimerCntMax = 20; // Intervalの繰り返し回数の指定。 ArrayCnt = 0; TxtArray = [ document.getElementById('HogeID'), document.getElementById('YamaguchiID'), document.getElementById('SontakuID'), document.getElementById('HugaID'), document.getElementById('PiyoID') ]; HdnArray = new Array(TxtArray.length); TimerId = setInterval( function () { if((TxtArray.length-1)<ArrayCnt){ ArrayCnt = 0; } ArrayPrv = (TxtArray.length+ArrayCnt-2)%TxtArray.length; // 「ArrayCnt-1」をマイナスにならないようにする。 if(HdnArray[ArrayPrv]===true){ HdnArray[ArrayPrv] = false; // true; // TxtArray[ArrayPrv].className = "FadeInAnimaCS"; } HdnArray[ArrayCnt] = true; // false; // TxtArray[ArrayCnt].className = "FadeOutAnimaCS"; ArrayCnt++; TimerCnt++; // ここをコメントにすれば永遠に繰り返します。 // 「TimerCntMax」は「TimerCnt」より大きな値にして下さい。 if(TimerCntMax<=TimerCnt){ clearInterval(TimerId); // 「setInterval()」を解除 } }, 1000); // --></script> </html>

回答No.9

CSSに関しては「回答No.8　amanojaku1」を参照してください、なお「回答No.8　amanojaku1」において「FadeOut、FadeIn」の名前と機能が逆でしたm(_ _)m インターバルは「1500」に変更してあります。 テキストのキャラクターセットに合わせて、metaタグでcharsetを指定して下さい。 <html> <head> <!-- この辺りにmetaタグでcharsetを指定して下さい --> <style type="text/css"> <!-- .FadeInAnimaCS { color: #000; opacity: 0; } .FadeInAnimaCS { animation: FadeInAnima 2s linear 0s 1 forwards; } @keyframes FadeInAnima { 100% { opacity: 1; } } .FadeOutAnimaCS { color: #000; opacity: 1; } .FadeOutAnimaCS { animation: FadeOutAnima 2s linear 0s 1 forwards; } @keyframes FadeOutAnima { 100% { opacity: 0; } } --> </style> </head> <div id="HogeID"> hoge </div> <div id="YamaguchiID"> yamaguchi </div> <div id="SontakuID"> sontaku </div> <div id="HugaID"> huga </div> <div id="PiyoID"> piyo </div> <script type="text/javascript"><!-- TimerCnt = 0; TimerCntMax = 20; // Intervalの繰り返し回数の指定。 ArrayCnt = 0; TxtArray = [ document.getElementById('HogeID'), document.getElementById('YamaguchiID'), document.getElementById('SontakuID'), document.getElementById('HugaID'), document.getElementById('PiyoID') ]; HdnArray = new Array(TxtArray.length); TimerId = setInterval( function () { if((TxtArray.length-1)<ArrayCnt){ ArrayCnt = 0; } ArrayPrv = (TxtArray.length+ArrayCnt-1)%TxtArray.length; // 「ArrayCnt-1」をマイナスにならないようにする。 if(HdnArray[ArrayPrv]===true){ HdnArray[ArrayPrv] = false; // true; // TxtArray[ArrayPrv].className = "FadeInAnimaCS"; } HdnArray[ArrayCnt] = true; // false; // TxtArray[ArrayCnt].className = "FadeOutAnimaCS"; ArrayCnt++; TimerCnt++; // ここをコメントにすれば永遠に繰り返します。 // 「TimerCntMax」は「TimerCnt」より大きな値にして下さい。 if(TimerCntMax<=TimerCnt){ clearInterval(TimerId); // 「setInterval()」を解除 } }, 1500); // --></script> </html>

回答No.8

下記はJavaScriptではなく、HTML、CSSの話です。 [CSS3][Sass] 要素を順番にフワッと表示するアニメーションを CSS の animation プロパティで作る https://memocarilog.info/webdesign/8050 CSS3のtransition-timing-functionの動きをサンプルで理解しよう http://weboook.blog22.fc2.com/blog-entry-313.html 「linear、ease～」の違いが視覚的に分かるサイト(サイトには「transition-timing-functionの違い」と書かれています)。 下記はJavaScriptではなく、HTML、CSSのソースです。 「opacity」は透明度。 >animation: FadeOutAnima 1s linear 0s 1 forwards; ↑2番目の数字がスタート：この例では0秒後にスタート(つまり、すぐスタート)。 1番目の数字がアニメーションを実行する時間：この例では1秒間アニメーションする。 3番目の数字が「FadeOutAnima」のキーワード(予約語ではありません)で参照される「@keyframes」の「100%」に対応する？、その「100%」は そのブロック内の「opacity: 1;」(透明度：1)に対応する。 >animation: FadeInAnima 1s linear 1s 1 forwards; ↑2番目の数字がスタート：この例では1秒後にスタート。 1番目の数字がアニメーションを実行する時間：この例では1秒間アニメーションする。 3番目の数字が「FadeInAnima」のキーワード(予約語ではありません)で参照される「@keyframes」の「100%」に対応する？、その「100%」は そのブロック内の「opacity: 0;」(透明度：0)に対応する。 <html> <head> <meta http-equiv="Content-Type" content="Text/HTML; charset=Shift_JIS"> <style type="text/css"> <!-- .FadeOutAnimaCS { color: #000; opacity: 0; } .FadeOutAnimaCS { animation: FadeOutAnima 1s linear 0s 1 forwards; } @keyframes FadeOutAnima { 100% { opacity: 1; } } .FadeInAnimaCS { color: #000; opacity: 1; } .FadeInAnimaCS { animation: FadeInAnima 1s linear 1s 1 forwards; } @keyframes FadeInAnima { 100% { opacity: 0; } } --> </style </head> <ul> <li class="FadeOutAnimaCS">hoge</li> <li class="FadeInAnimaCS">piyo</li> </ul> </html>

回答No.7

>for(var i = 0; i <= arrayItem.length; i=i++) { >出たり消えたりする処理 >} 無限ループだとすればi変数をforループ内で上書きしてませんか？、そうでないなら「出たり消えたりする処理」自体に問題がある可能性があります。

htmlcss123
質問者

お礼

https://codepen.io/anon/pen/zzqjKg のようにiの変更を確かにしています。 それが原因でフリーズするのですか？

htmlcss123
質問者

補足

頂いたソースコートは勉強させていただきますが、 for分の影響でブラウザがフリーズする県はどうでしょうか？

回答No.6

>回答No.5　amanojaku1 >>TxtArray[ArrayPrv].style.visibility = "visible"; >>TxtArray[ArrayCnt].style.visibility = "hidden"; >>この二つの式が2秒ならおそらく1秒ごとに実行して合計で2秒になるのでしょうね。 >くどいようですが それらは別々のテキストです、「ArrayCnt」が現時点のテキスト、「ArrayPrv]」が1つ前のテキストですので、同時に(ふわっと消す、ふわっと出るを)実行しても良いモノです。 TxtArray = [ document.getElementById('HogeID'), document.getElementById('YamaguchiID'), document.getElementById('SontakuID'), document.getElementById('HugaID'), document.getElementById('PiyoID') ]; ↑この配列に定義されている配列要素(この場合テキスト)をカウンターで参照しています(配列はゼロ・スタートです)。 例えば「ArrayPrv = (TxtArray.length+ArrayCnt-1)%TxtArray.length;」の式で「ArrayCnt」の1つ前の値を演算していますので、「ArrayCnt」が1の場合(テキストは「yamaguchi」となる)、「ArrayPrv」は０になります(テキストは「hoge」となる)。 また、「ArrayCnt」が０の場合(テキストは「hoge」となる)、「ArrayPrv」は4になります(テキストは「piyo」となる)。 「ArrayPrv = (TxtArray.length+ArrayCnt-1)%TxtArray.length;」でマイナスにならないように計算しています(-1の場合は ぐるっと回って最後尾となる)。

htmlcss123
質問者

お礼

んーん難しですね。 教えていただいた情報をもとに自分で作ってみてうまくいっていそうなのに前回記載した通り今度はフリーズする問題が発生しました。 forが終わらないからでそうか？

回答No.5

>JavaScriptのsetIntervaｌ関数の意味を正確に理解するための１つの説明 >http://d.hatena.ne.jp/mindcat/20091018/1255889695 > >>setInterval関数を実行したときに、「現在時刻＋第２引数で指定した時間」の時刻をタスクに付けてキューに積みます。時間が経ち、そのタスクがキューの先頭に来ると、Scriptエンジンはそのタスクを実行します。その後に、タスクの時刻を「現在時刻＋第２引数で指定した時間」の時刻に更新して再びキューに積むという動作になります。従って、setInterval関数の第１引数で指定した関数の実行に関わる時間分だけ遅れることになります。 ↑申し訳ございません、これは「setInterval」の仕様です。 >TxtArray[ArrayPrv].style.visibility = "visible"; >TxtArray[ArrayCnt].style.visibility = "hidden"; >この二つの式が2秒ならおそらく1秒ごとに実行して合計で2秒になるのでしょうね。 くどいようですが それらは別々のテキストです、「ArrayCnt」が現時点のテキスト、「ArrayPrv]」が1つ前のテキストですので、同時に(ふわっと消す、ふわっと出るを)実行しても良いモノです。

htmlcss123
質問者

お礼

おかげさまでやり方はだいぶ分かったのですがブラウザがフリーズしてしまいます。 ・ function loop() { for(var i = 0; i <= arrayItem.length; i=i++) { 出たり消えたりする処理 } } setTimeout( loop(), 4000); } loop(); ・timuoutの部分を削除してintervalにしても同じです。 setInterval( loop(), 8000); forが無限ループだからでしょうか？

回答No.3

>ここで隠していたテキストを表記して、 >すぐ直後で隠していますが、 >これだと出た瞬間に消えてしまうので、人間の目では認識できないくないですか？ >二秒くらいは出しておきたいのですが。 実際にページを表示させて見て下さい。 >TxtArray[ArrayPrv].style.visibility = "visible"; >TxtArray[ArrayCnt].style.visibility = "hidden"; カウンターが違います。 「ArrayCnt」が現時点、「ArrayPrv」が1つ前です。

htmlcss123
質問者

お礼

＞＞＞ if(TxtArray[ArrayCnt].style.visibility!="hidden"){ ArrayPrv = (TxtArray.length+ArrayCnt-1)%TxtArray.length; // 「ArrayCnt-1」をマイナスにならないようにする。 TxtArray[ArrayPrv].style.visibility = "visible"; TxtArray[ArrayCnt].style.visibility = "hidden"; ArrayCnt++; } TimerCnt++; // ここをコメントにすれば永遠に繰り返します。 // 「TimerCntMax」は「TimerCnt」より大きな値にして下さい。 if(TimerCntMax<=TimerCnt){ clearInterval(TimerId); // 「setInterval()」を解除 } }, 2000); を見ると if(TimerCntMax<=TimerCnt){ は二秒後に 下記を止めているのですよね。 TimerId = setInterval( function () { if((TxtArray.length-1)<ArrayCnt){ ArrayCnt = 0; } TxtArray[ArrayPrv].style.visibility = "visible"; TxtArray[ArrayCnt].style.visibility = "hidden"; は消えている物を出した瞬間に、消していますが、 よく考えると出た瞬間に消えるというので基本的には問題ないですね。 ただこれだとふわっとは出てこないのでふわっと出すためにはcssで二秒後に実行するとすれば可能ですが、 JSではこのようなことはできないのでしょうか？ settimeoutで二秒後に実行はできますが、消してから二秒後に出現と連続した作業を遅らす方法はないのですかね？

htmlcss123
質問者

補足

settimuoutがこの処理が終わるまではこれ以降の処理に移らなければ、簡単にこの後に次の処理を記載すれば二秒後に実行とできるのですが、 この処理を待たずに次の処理を始めてしまう場合は次の処理を二秒後に実行とできませんよね。 仕様上どちらなのかご存知ですか？

回答No.2

まずIDはページ内で一意でなければなりません。 <div id="HogeID"> hoge </div> <div id="YamaguchiID"> yamaguchi </div> <div id="SontakuID"> sontaku </div> <div id="HugaID"> huga </div> <div id="PiyoID"> piyo </div> <script type="text/javascript"><!-- TimerCnt = 0; TimerCntMax = 20; // Intervalの繰り返し回数の指定。 ArrayCnt = 0; TxtArray = [ document.getElementById('HogeID'), document.getElementById('YamaguchiID'), document.getElementById('SontakuID'), document.getElementById('HugaID'), document.getElementById('PiyoID') ]; TimerId = setInterval( function () { if((TxtArray.length-1)<ArrayCnt){ ArrayCnt = 0; } if(TxtArray[ArrayCnt].style.visibility!="hidden"){ ArrayPrv = (TxtArray.length+ArrayCnt-1)%TxtArray.length; // 「ArrayCnt-1」をマイナスにならないようにする。 TxtArray[ArrayPrv].style.visibility = "visible"; TxtArray[ArrayCnt].style.visibility = "hidden"; ArrayCnt++; } TimerCnt++; // ここをコメントにすれば永遠に繰り返します。 // 「TimerCntMax」は「TimerCnt」より大きな値にして下さい。 if(TimerCntMax<=TimerCnt){ clearInterval(TimerId); // 「setInterval()」を解除 } }, 2000); // --></script>

htmlcss123
質問者

お礼

IDは0,1,2とついているのでちゃんとユニークになってますよ。 ＞＞＞ TimerId = setInterval( function () { if((TxtArray.length-1)<ArrayCnt){ ArrayCnt = 0; } ここで最後のインデックス番号になったら初期化をしてループさせているのですね。 ＞＞＞ if(TxtArray[ArrayCnt].style.visibility!="hidden"){ ArrayPrv = (TxtArray.length+ArrayCnt-1)%TxtArray.length; // 「ArrayCnt-1」をマイナスにならないようにする。 TxtArray[ArrayPrv].style.visibility = "visible"; TxtArray[ArrayCnt].style.visibility = "hidden"; ArrayCnt++; } ここで隠していたテキストを表記して、 すぐ直後で隠していますが、 これだと出た瞬間に消えてしまうので、人間の目では認識できないくないですか？ 二秒くらいは出しておきたいのですが。

回答No.1

<div id="TxtID"> hoge </div> <script type="text/javascript"><!-- TxtCnt = 0; TxtMax = 10; // Intervalの繰り返し回数の指定。 Txt = document.getElementById('TxtID'); TimerId = setInterval( function () { Txt if(Txt.style.visibility!="hidden"){ Txt.style.visibility = "hidden"; }else{ Txt.style.visibility = "visible"; } TxtCnt = TxtCnt+1; // ここをコメントにすれば永遠に繰り返します。 // 「TxtMax」は「TxtCnt」より大きな値にして下さい。 if(TxtMax<=TxtCnt){ clearInterval(TimerId); // 「setInterval()」を解除 } }, 2000); // --></script>

htmlcss123
質問者

お礼

いつもありがとうございます。 https://codepen.io/anon/pen/BZjvYO こちらにいただいたものを再現しました。 確かに一つだけの場合はこのようなイメージですが、 三つテキストがあって、スライドショーのようにふわっと切り替える場合はどうでしょうか？ textcontentの代入するテキストを変えるようにした方がいいのでしょうか？

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • 一定時間後にsetIntervalでループ処理を行うにはどうしたらいい

    一定時間後にsetIntervalでループ処理を行うにはどうしたらいいのでしょうか。 JavaScriptにwait関数があれば早いのですが、setTimeout（）のなかに入れ込むしか思いつきません。 forやwhile等で空ループさせて終了後に実行という方法も考えましたが、CPUに余計な負荷がかかるみたいでこれは避けたいです。 具体的には次のようなことがしたいと思っています。 function(a,b,c){ setTimeout(function(){ setInterval(function(){} ,10 ) },c) しかしこれだと再下段の関数が実行されないようです。またループ処理は可能な限りsetInterval()にさせたいと思っています。クロージャで解決できるんでしょうか。何か良い方法がありましたらお願いします。

  • fizzbuzzがうまくいきません

    fizzbuzzがうまくいきません https://codepen.io/anon/pen/mWbvbp?editors=1112 fizzbuzzだけになってしまいます。 つまりあまりが両方ともすっと0になっているようですが、 なぜ1づつ増えて行っていないのでしょうか？ インスペクタで見ると3fizと5fizは0になっています。 始めは0割る3はあまりが0なので初めのあまりは0だからでしょうか？ するとループ処理の結果どうなっているかというのはインスペクタで見ることはできないのでしょうか？

  • 繰り返し処理をして、要素がいくつあっても、うまくい

    while文で繰り返し処理をして、要素がいくつあっても、うまくいくようにしたいのですが、var inputResultをカプセル化できないのでこのような場合どうすればいいのでしょうか？ https://codepen.io/anon/pen/XqOWrQ document.querySelectorAll('.js-myBtn').addEventListener と変更したのですが、このボタンの一つ目を押したら一つ目として実行二つ目以降も同様にとなりません。 イベントを起こすトリガーの要素を配列で指定はできないのでしょうか？

  • スタックオーバーフローとでてきて、ちゃんと動きませ

    https://okwave.jp/qa/q9340961.html の続き ncaught RangeError: Maximum call stack size exceeded 変更後によってブラウザはフリーズしなくなりましたが、まだスタックオーバーフローとでてきて、ちゃんと動きません。 forをなくしてもまだループ処理によって問題が起きているのでしょうか？ https://codepen.io/anon/pen/zzqjKg

  • 二度実行するのを防止したい。

    クイズゲームの判定で、複数入力された回答の一つでも正解があれば正解とするようにしたのですが、正解の処理を一度しても処理が終わらずに二度点数が入ってしまうので一度でも正解になったらそこで処理を止めたいのですがexitを入れた所今度はうまく動かなくなりました。 この方法は間違えないのでしょうか？ https://codepen.io/anon/pen/bKoObo

  • チェックボックスがすべてfalseになる

    チェックボックスがチェックされているか否かによって　処理をかえたいのですが　なぜかチェックをしていてもすべてfalseになってしまいます。 これはチェックしていればtrue、していなければfalseになるはずなんですよね？ 一部抜粋しました。 https://codepen.io/anon/pen/jmoLmQ

  • 一定時間が経過した後のフレーム移動について

    Flash初心者です。うまく質問したいことが伝わるか心配ですが、どうぞ宜しくお願いします。 タブメニュー型のムービーを作成していまして、10秒経過すると次のタブが開き、 また10秒すると次のタブが開く…。このループです。 タブの数は4つ。1フレームごとにそれぞれのタブが開いているように画像で見せておいて（計4フレームを使用）、 スクリプトで10秒の間隔をおき、次のフレームに移動させる仕組みになっています。 タブにはクリックできるようにボタンが仕込んであり、クリックするとムービーの流れ（再生されている順）に関係なく、 そのタブに移動します（2つ目のタブなら2フレーム目を再生）。 （タブの部分のテキスト、タブが開いたときに表示されるバナー画像は外部読み込みになっています。 ただ、この外部読み込みに関しては質問の内容に影響しないと思いますので詳しくは説明しないでおきます。） スクリプトは下記のとおりです。（注：教えて！gooにあったものを使わせていただきました。） ※1フレーム目 --------------------------------------------------------------------- this.stop(); timerID = setInterval(startMovie, 10000); function startMovie() { gotoAndPlay(2); clearInterval(timerID); } ※2フレーム目 --------------------------------------------------------------------- this.stop(); timerID2 = setInterval(startMovie2, 10000); function startMovie2() { gotoAndPlay(3); clearInterval(timerID2); } ※3フレーム目 --------------------------------------------------------------------- this.stop(); timerID3 = setInterval(startMovie3, 10000); function startMovie3() { gotoAndPlay(4); clearInterval(timerID3); } ※4フレーム目 --------------------------------------------------------------------- this.stop(); timerID4 = setInterval(startMovie4, 10000); function startMovie4() { gotoAndPlay(1); clearInterval(timerID4); } これでちゃんと10秒経過すると次のフレームに移動し、それがループされるのですが 問題は、途中で順に再生されているタブと違うタブをクリックしたときに起こります。 一度、その再生順がクリックすることによって変わってしまうと、元々の『10秒後に次のフレームへの移動』の動きと、 クリックされたタブから『10秒後に次のフレームへの移動』の動きが重複しているようなんです。 ちゃんと確認できたわけではありませんが、複数回これを繰り返すと4つのタブがかなりの速度でパッパッパと遷移し、 まともに見ることすらできないものになってしまいます。 解決したいのは、クリックしたタブ（移動したフレーム）から新たに10秒がカウントされ、10秒後には次のフレームに移動し 10秒経過する前に他のタブをクリックしたときでも、そのタブ（フレーム）に移動してからまた新たに10秒がカウントされる…。 このようにするにはどうしたらいいでしょうか？ どうぞご教示ください。

  • 空の要素の文字列を取得するとnullではなくund

    空の要素の文字列を取得するとnullではなくundefinedが返ってくるのはなぜでしょうか？ var history1Txt = history1.value; また値が入っていてもundefinedが返ってきます。 値が入っている時だけ新しい履歴のテキストを古い履歴にコピーして、常に履歴がサイクルするようにしたいです。 https://codepen.io/anon/pen/MVzRLa

  • 数秒後に別フレームにとばす方法

    1フレーム目で画像を読み込み10秒表示させた後に２フレーム目でまた10秒表示させるといった事を試しています。 表示させる画像はムービークリップで最後の1秒でフェードアウトさせるようにしているのですが 完全にフェードアウトする前に2フレーム目に飛んでしまいます。 何か解決方法はないのでしょうか？？ 1フレーム目 ---------------------------------------------------------- this.stop(); timerID = setInterval(startMovie, 10000); function startMovie() { clearInterval(timerID); gotoAndStop(2); } 2フレーム目 ---------------------------------------------------------- this.stop(); timerID = setInterval(startMovie, 10000); function startMovie() { clearInterval(timerID); gotoAndStop(1); } ちなみにgotoAndStop();を消すとそのフレームでループしますが完全にフェードアウトしてくれます…。

    • ベストアンサー
    • Flash
  • 処理時間により、その後の処理の分岐をしたいのですが

    PHPスクリプト内にて、ある処理が例えば30秒以上かかった場合は、その瞬間にexit()やエラーをecho()というような 実装をしたいと思うのですが、どのように書けばいいのか思いつきません。 function hoge() { /* 処理内容 */ //α return $foo; } $foo = hoge(); //β があった場合、どこに、どのように書けばいいのでしょうか？ 簡単に書けば、 $time = time(); if(time() - $time >30) { echo "時間超過"; } のような時間的処理分岐を入れたいと思うのですが。 αやβの前に$time = time();を置いたとしても、αの"処理内容"やβの関数実行の後にif(){}節を入れることになるので、 逐次処理のせいで、処理が15分かかった後とかにエラー出力とかになってしまいます。 自分は、何かをスクリプト中で実行し、その処理が30秒を超えた場合はエラーを出したいと考えております。 上記のような分岐方法でなくてもいいのですが、どのように書けばいいのかアドバイス頂けないでしょうか？

    • ベストアンサー
    • PHP

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する