ホームページ > 記事 > ウェブフロントエンド > Web ページ上の画像を表示する前に 5 秒待機させる方法_html/css_WEB-ITnose
Web ページ上の画像を表示する前に 5 秒間待機させる方法。
Webページを開くと、Webページ内の写真がすぐに表示されます。 Webページを開いてから5秒後に特定の画像を表示させる方法。
1. 画像読み込みの判定イベントがあり、そのイベント内で画像オブジェクトの表示・非表示を設定します
2. Webページにタイマーを追加し、いつ5秒になると指定した画像が表示されます
<style>#div1{height:100px;width:100px;background-color:yellow;display:none}</style><script type="text/javascript"> window.onload=function(){ var i=1; setInterval(function(){ i++ if(i==5){ document.getElementById("div1").style.display="block"; } },1000); }</script><div id="div1">11222</div>
JSタイマーsetInterval
jsで制御するにはsetTimeout()
タイマーsetIntervalを使用します
setTimeout()は一定時間後に実行されるように定義された関数ですイベントトリガー後の一定時間実行
実行時間は自分で定義
setInterval() Yes イベントトリガー後、一定時間ごとに実行
2 階のコードには多くのエラーがあります。
1. 要件に従って、setInterval() の代わりに setTimeout() を最初に使用する必要があります。これは、関数の説明を 7 階に転記したものです。
2. また、5 秒後に表示する場合は、1 秒のイベントを設定してカウントする必要はなく、余分です。
3. setInterval()を使用する場合、表示操作をトリガーした後、clearInterval()を使用して不要なタイミングの継続をキャンセルする必要があります。
正しい方法は setTimeout() を直接使用することです。これは 5 秒で完了します:
09764676d23cdbbbcb83e44490f0ff31
4ec11beb6c39d0703d1751d203c17053
document.getElementById("theforever").style.display="none"
setTimeout(function(){
document.getElementById ("theforever") .style.display="ブロック";
}
,5000)
$("object").lay("5000")
;