HTMLページが3秒後に自動的にジャンプする3つの一般的な方法

HTMLページが3秒後に自動的にジャンプする3つの一般的な方法

実際には、N 秒後にページを自動的にジャンプさせるにはどうすればよいかという問題によく遭遇します。

私自身も問題に遭遇し情報を検索し、3つの方法をまとめました

方法1:

最も簡単な方法は、コードをフロントの <head> に直接追加することです。


コードをコピー
コードは次のとおりです。

<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 インストールと設定手順

推薦する

CSS を使用して 3 列のアダプティブ レイアウト (両側は固定幅、中央はアダプティブ) を実現します。

いわゆる 3 列適応レイアウトとは、両側の幅が固定され、中央のブロックの幅が適応されることを意味しま...

MySQLデータベースのマスタースレーブレプリケーションの原理と機能の分析

目次1. データベースのマスター/スレーブ分類: 2. MySQL マスタースレーブの紹介3. マス...

子コンポーネントで vue activated を使用する詳細

ページ: ベース: <テンプレート> <div class="タブコンテ...

MySQLの暗黙的な変換について話す

作業の過程で、暗黙的な変換が発生するケースが数多くあります。暗黙的な変換は、クエリの速度低下を引き起...

Centos7 に PHP と Nginx をインストールする詳細なチュートリアル

Centos のサーバー側への適用がますます普及するにつれて、Centos7 もますます使用されるよ...

Linux ファイルシステムの説明: ext4 以降

今日は、ext3 や他の以前のファイル システムとの違いを含め、ext4 の歴史について説明します。...

CSS スタイルを変更してグレーの Web ページ (色なし、明るい白黒のみ) を実現するいくつかの方法

通常、清明節、国哀悼日、大地震の日、影響力のある偉人の死去または命日には、ウェブマスターとして、故人...

CSS スタイルを使用して表のフォントを垂直中央に配置する方法

CSS スタイルを使用して表内のフォントを垂直方向に中央揃えする方法は次のとおりです。下図のようなカ...

vue $http の get および post リクエストのクロスドメイン問題を解決する

Vue $http get および post リクエストのクロスドメイン問題まずconfig/ind...

MySQL 文字列分割の例 (区切り文字なしの文字列抽出)

区切り文字なしの文字列抽出質問の要件データベース内のフィールド値:実装効果: 1行のデータを複数行に...

ウェブレスポンシブレイアウトにおけるiframe適応の方法

問題<br />レスポンシブ レイアウトでは、iframe 要素に注意する必要があります...

CSSトランジションは高さを変更することで要素を拡大したり縮小したりします。

一般的な開発ニーズとして、要素の一部を必要になるまで折りたたんでおきたいことが挙げられます。 Boo...

Vueはツリーテーブルを実装する

この記事では、ツリーテーブルを実装するためのVueの具体的なコードを例として紹介します。具体的な内容...

Docker がポート 2375 を公開し、サーバー攻撃を引き起こす問題と解決策

docker リモート API を学習した学生であれば、ポート 2375 についてよくご存知だと思い...

Vueはボタン切り替え画像を実装します

この記事では、ボタン切り替え画像を実現するためのVueの具体的なコードを例として紹介します。具体的な...