HTML で自動ページジャンプを実現する 5 つの方法

HTML で自動ページジャンプを実現する 5 つの方法

前回の記事では、HTML ページが 3 秒後に自動的にジャンプする一般的な 3 つの方法を紹介しました。この記事では、引き続き HTML ページ ジャンプに関する関連知識を紹介します。一緒に学びましょう。
以下に 5 つの例を挙げて詳しく説明します。これらの例の主な機能は、5 秒後に同じディレクトリ内の hello.html ファイルに自動的にジャンプすることです (必要に応じて変更してください)。

1) HTMLの実装


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

<ヘッド>
<meta http-equiv="refresh" content="5;url=hello.html">
</head>

長所: シンプル

デメリット: Struts Tilesでは使用できません

2) JavaScriptの実装


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

<mce:script language="javascript" type="text/javascript"><!--
タイムアウトを設定します("javascript:location.href='http://liting6680.blog.163.com/blog/hello.html'", 5000);
// --></mce:script>

利点: 柔軟性があり、他の機能と組み合わせることができます

デメリット: ブラウザによって影響される

3) カウントダウンJavaScript実装と組み合わせる(IE)


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

<span id="totalSecond">5</span>
<mce:script language="javascript" type="text/javascript"><!--
var 秒 = totalSecond.innerText;
setInterval("リダイレクト()", 1000);
関数リダイレクト(){
totalSecond.innerText=--秒;
if(second<0) location.href='http://liting6680.blog.163.com/blog/hello.html';
}
// --></mce:script>

利点: より人道的

デメリット: Firefox はサポートしていません (Firefox は span、div などの innerText 属性をサポートしていません)

3) カウントダウンJavaScript実装と組み合わせる(Firefox)


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

<mce:script language="javascript" type="text/javascript"><!--
var second = document.getElementById('totalSecond').textContent;
setInterval("リダイレクト()", 1000);
関数リダイレクト()
{
document.getElementById('totalSecond').textContent = --秒;
if (second < 0) location.href='http://liting6680.blog.163.com/blog/hello.html';
}
// --></mce:script>

4) FirefoxがinnerTextをサポートしていない問題を解決する


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

<span id="totalSecond">5</span>
<mce:script language="javascript" type="text/javascript"><!--
if (navigator.appName.indexOf("Explorer") > -1) {
document.getElementById('totalSecond').innerText = "私のテキストinnerText";
} それ以外{
document.getElementById('totalSecond').textContent = "私のテキストのtextContent";
}
// --></mce:script>

5) 3)と3')の統合


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

<span id="totalSecond">5</span>
<mce:script language="javascript" type="text/javascript"><!--
var second = document.getElementById('totalSecond').textContent;
(navigator.appName.indexOf("Explorer") > -1 の場合)
{
秒 = document.getElementById('totalSecond').innerText;
} それ以外
{
秒 = document.getElementById('totalSecond').textContent;
}
setInterval("リダイレクト()", 1000);
関数リダイレクト()
{
(秒数 < 0)の場合
{
場所.href='http://liting6680.blog.163.com/blog/hello.html';
} それ以外
{
(navigator.appName.indexOf("Explorer") > -1 の場合)
{
document.getElementById('totalSecond').innerText = 秒 --;
} それ以外
{
document.getElementById('totalSecond').textContent = 秒 --;
}
}
}
// --></mce:script>

上記の 5 つの例では、HTML を使用して自動ページ ジャンプを実現する 5 つの方法を紹介しています。気に入っていただければ幸いです。

<<:  さまざまなReact状態マネージャーの解釈と使用方法

>>:  JTAを実装するためにAtomikosと組み合わせたTomcatについて

推薦する

クリックして認証コードと認証を切り替えるJavaScript

この記事では、クリックして切り替える認証コードと認証を実装するためのJavaScriptの具体的なコ...

ウェブページの背景色を制御する CSS コード

誰もが自分の Web ページの背景にふさわしい画像を見つけることに悩むことが多いと思います。これは事...

Macにmysql5.7.18をインストールする詳細な手順

1. ツール今必要なツールは2つあります: MySQLサーバー (mysql-5.7.18)、MyS...

3次元画像配置効果を実現する純粋なCSSのサンプルコード

1. 要素の幅/高さ/パディング/マージンのパーセンテージ基準要素の幅/高さ/パディング/マージンの...

携帯電話番号が合法かどうかを判断するWeChatアプレットのサンプルコード

目次シナリオ効果コード要約するシナリオ登録ページに携帯電話番号を入力し、登録インターフェイスを要求す...

検索エンジンのウェブサイトの入り口の無料コレクション

1: Baiduウェブサイトログイン入口ウェブサイト: http://www.baidu.com/s...

MySQL インデックスの長さ制限の原理の分析

この記事は主に、MySQL インデックスの長さ制限の原理の分析を紹介します。サンプル コードを通じて...

ボタンをクリックして画像を切り替える JavaScript

この記事の例では、ボタンをクリックすることで画像を切り替えることを実現するJavaScriptの具体...

JavaScript プロトタイプとプロトタイプチェーンの詳細

目次1. プロトタイプ(明示的なプロトタイプ) 2. __proto__ (暗黙のプロトタイプ) 3...

別の種類の「キャンセル」ボタン

「キャンセル」ボタンは必要な操作プロセスの一部ではなく、デザイン上の主要な要素として表示されません...

JPQLに基づく純粋なSQL文方式の詳細な説明

JPQL は Java Persistence Query Language の略です。 Java ...

MySQL 5.6 の「暗黙的な変換」によりインデックスが失敗し、データが不正確になる

背景SQL クエリを実行するときに、where 条件の vachar 型フィールドの単一引用符を削除...

MYSQL ロック解除とロックテーブルの紹介

MySQL ロックの概要他のデータベースと比較すると、MySQL のロック メカニズムは比較的単純で...

jQueryは記事の折りたたみと展開の機能を実装します

この記事の例では、記事の折りたたみと展開の機能を実現するためのjQueryの具体的なコードを参考まで...

固定、流動的、柔軟なウェブページレイアウトの長所と短所の分析

ウェブデザイナーを長い間悩ませてきた疑問があります。それは、固定レイアウト、流動的レイアウト、柔軟レ...