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

推薦する

HTML の基礎必読 - CSS スタイルシートの包括的な理解

CSS (カスケーディング スタイル シート) は、HTML Web ページを美しくするために使用さ...

CSSは下部のタップバー機能を実装します

現在多くの携帯電話には、下部のタブバーを切り替える機能があります。私も最近、同様の機能を見つけました...

Chrome、Firefox、IEで入力カーソルの位置がずれる問題の解決方法

ブラウザで入力カーソルがずれる問題の詳しい説明<br />仕事で問題に遭遇し、解決策を探...

Vueの監視方法のケースの詳細な説明

Vueでの監視方法時計知らせ名前: 監視する属性に同じ名前を付ける必要があります。 1. 機能Vue...

MySQL テーブル全体の暗号化ソリューション keyring_file の詳細な説明

例示するMySql Community Edition は、5.7.11 以降、テーブルベースのデー...

portainer を使用してリモート docker に接続するチュートリアル

Portainer は、Docker ホストと Docker Swarm クラスターの管理に使用でき...

Win10 への MySQL 5.7 のインストール MSI 版のチュートリアル（画像とテキスト付き）

主にインストール後に my.ini ファイルを確認するために、msi 形式でインストールしました。フ...

VMware Workstation のインストール Linux システム

始める段階から初心者になるまで、Linux オペレーティング システムは不可欠です。最初のステップは...

MySQL Strict Modeの知識ポイントの詳細な説明

I. 厳密モードの説明MySQL 5.0 以降の厳密モード (STRICT_TRANS_TABLES...

crontab の実行結果を電子メールでユーザーに通知する方法

症状Centos7 ホストに crontab タスクを設定しましたが、時間が来るとメールを実行して「...

Dockerイメージを完全にアンインストールする手順

1. docker ps -a 実行中のイメージプロセスを表示する [root@mylinux~]#...

レスポンシブなカードホバー効果を実現するための HTML+CSS

目次成し遂げる：要約:言うことはあまりありませんが、まずは効果を見てみましょう。 カードホバー、レス...

TypeScript デコレータ定義

目次1. コンセプト1.1 定義1.2 デコレータファクトリー1.3 デコレータの組み合わせ1.4 ...

CSS の div の下の同じ行にある複数の要素を右揃えにする

方法1:フロート:右さらに、フローティングにするとレイアウトがよりコンパクトになります（隙間がなくな...

時間を節約できる Linux コマンド エイリアス 15 個

序文Linux システムの管理と保守のプロセスでは、多数のコマンドが使用されます。非常に長いコマンド...