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 flex 複数列レイアウト

基本的な3列レイアウト 。容器{ ディスプレイ: フレックス; 幅: 500ピクセル; 高さ: 20...

Windows 10にOdoo12開発環境をインストールする方法

序文多くの友人は Mac コンピューターを持っていないと言っていますが、Windows 開発は実際に...

Linux での rpm、yum、ソースコードの 3 つのインストール方法の詳細な紹介

第1章 ソースコードのインストールRPM パッケージは特定のシステムとプラットフォームに応じて指定さ...

コンパイル/サーバーなしでブラウザにCommonJSモジュールを実装する

目次導入1. one-click.jsとは2. パッケージングツールはどのように機能しますか? 3....

Ubuntu インストール cuda10.1 ドライバ実装手順

1. cuda10.1をダウンロードします。 NVIDIA 公式ウェブサイト リンク: https:...

Linux teeコマンドの使い方の詳しい説明

teeコマンドは主にstandout（標準出力ストリーム、通常はコマンド実行ウィンドウ）に出力し、同...

Docker+K8S クラスタ環境構築と分散アプリケーション展開

1. Dockerをインストールする yumでdockerをインストール #サービスを開始する sy...

CocosCreator ScrollView 最適化シリーズ: フレーム読み込み

目次1. はじめに2. 行き詰まった問題の分析3. 解決策（理論） 4. ソリューション（コード） ...

CentOS7 systemdにカスタムシステムサービスを追加する方法

システムド: CentOS 7のサービスsystemctlスクリプトは、/usr/lib/syste...

docker 環境でのデータベース バックアップ (postgresql、mysql) のサンプル コード

目次posgresql バックアップ/リストアMySQL バックアップ/復元posgresql バッ...

MySQL イベント スケジューラに関するよくある話 (必読)

概要MySQL には独自のイベント スケジューラもあり、これは Linux の crontab ジョ...

Centos7 での nginx のインストールと設定に関する詳細なチュートリアル

注: ソフトウェアのインストールの基本ディレクトリ パスは /usr/local です。ソフトウェア...

実際のプロジェクトでElementUIを使用する手順の詳細な説明

目次1. テーブル自動ソート2. ページング機能3.el-checkbox-group 複数選択ボッ...

JS を使用してクリップボード内の Excel コンテンツを解析する方法

目次序文1. イベントとクリップボードを貼り付ける2. クリップボード内のコンテンツ形式3. HTM...

CSSクラス名の問題の詳細な説明

数字で始まる次の CSS クラス名は有効になりません。 .1番目{ 色: 赤; }有効な CSS ク...