HTMLページが3秒後に自動的にジャンプする3つの一般的な方法
|
実際には、N 秒後にページを自動的にジャンプさせるにはどうすればよいかという問題によく遭遇します。 コードをコピー コードは次のとおりです。<span style="font-size:18px;"> </span><span style="font-size:24px;"><meta http-equiv="refresh" content="3;URL=res.html"> </span> <span style="font-size:24px;">//3 秒後に res.html に自動的にジャンプします。この 2 つは同じファイルに属しています。jsp ページにジャンプする必要がある場合は、url に URL アドレスを入力する必要があります (ブラウザのアドレス バーに書き込まれたデータ、例: http://localhost:8080/TestDemo/1.jsp)</span> 方法2: ウィンドウでメソッドを使用する必要があります: setTimeout は、指定されたミリ秒数後に式を評価します。 例： コードをコピー コードは次のとおりです。window.setTimeout("アラート('Hello, world')", 1000); これは js コードに書かれています。 具体的な実装は以下のとおりです。 コードをコピー コードは次のとおりです。<script type="text/javascript"> onload=function(){ <span style="white-space:pre"> </span>//Webページに入るときにこのメソッドをロードします setTimeout(go, 3000); <span style="white-space:pre"> </span> /*js 内の単位は ms です*/ }; 関数go(){ location.href="http://localhost:8080/TestDemo/index.jsp"; } </スクリプト> //3秒後にgoメソッドを自動的に実行し、index.jspページに直接ジャンプします 方法3: 上記の 2 つの例の欠点は、ジャンプはできるものの、いつジャンプすればよいかわからないことです。カウントダウン 3-2-1 を実装します。 settimeout メソッドではこれを実行できなくなりました。 setInterval は指定されたミリ秒ごとに式を評価します。 同じ時間が経過すると、対応する機能が実行されます。具体的な実施方法： コードをコピー コードは次のとおりです。<script type="text/javascript"> onload = 関数() { 間隔を 1000 に設定します。 }; var x=3; //グローバル変数を使用して実行する 関数go(){ x--; もし(x>0){ document.getElementById("sp").innerHTML=x; // x の値は毎回異なります。 }それ以外{ location.href='res.html'; } } </スクリプト> 上記の内容は、この記事で紹介した、HTML ページが 3 秒後に自動的にジャンプする 3 つの一般的な方法です。気に入っていただければ幸いです。 |
<<: ウェブページのCSSの優先順位について詳しく説明します
>>: MySQL の Docker インストールと設定手順
推薦する
MySQLクエリ制御ステートメントの詳細なグラフィック説明
mysql クエリ制御ステートメントフィールド重複排除 **キーワード: 明確** 構文: テーブル...
MySQL で日付時刻データを取得し、その後に .0 を追加する方法
MySQL のデータ型は datetime です。データベースに保存されているデータは 2015-0...
CSS3 で実装された画像ホバートグルボタン
結果：実装コードhtml <ul class="スライド"> <...
HTML タグ tbody の使い方と説明
tbody 要素は、thead 要素および tfoot 要素と組み合わせて使用する必要があります...
Vue ページ内の公開マルチタイプ添付画像アップロード領域と適用可能な折りたたみパネル (サンプルコード)
フロントエンド プロジェクトでは、添付ファイルのアップロードは非常に一般的な機能であり、ほぼすべての...
星のきらめき効果を実現するネイティブ js
この記事の例では、星のきらめき効果を実現するためのjsの具体的なコードを共有しています。具体的な内容...
MySQLでヘッダー付きのCSVファイルをエクスポートする方法
公式ドキュメント http://dev.mysql.com/doc/refman/5.7/en/se...
Dockerでspringcloudプロジェクトをデプロイする方法
目次Dockerイメージのダウンロードmysqlとnacosを起動する独自のJavaプロジェクトを変...
携帯電話番号の歩数記録を取得するWeChatアプレット
序文最近、小さなプログラムを開発しているときに、このような問題に遭遇しました。ユーザーが認証をクリッ...
純粋な CSS を使用して 3D 回転効果を実装するサンプル コード
3D効果を実現するには、主にCSSのpreserve-3dプロパティとperspectiveプロパテ...
Centos7.4 システムに yum ソースから mysql 5.6 をインストールする
システム環境: centos7.4 1. データベースがインストールされているかどうかを確認します。...
初心者向け入門講座⑧：記事サイトを簡単に作る
前回の投稿では、Web ページの作成方法について説明しました。Web サイトは多くの Web ページ...
Tomcatが親の委任メカニズムを破壊する方法についての簡単な説明
目次JVM クラスローダーTomcat クラスローダークラスを検索ロードクラスクラスをロードしようと...
VueのkeepAliveコンポーネントの機能と使い方の詳細な説明
序文面接中、多くの面接官は「keep-alive が何をするのか知っていますか?」と質問する際に V...
proxy_pass を設定した後に Nginx が 404 を返す問題を解決する
目次1. proxy_pass を設定した後に Nginx が 404 を返す問題のトラブルシューテ...