HTML5 の記事: ページジャンプを実現する 5 つの方法 (コード共有)-htmlチュートリアル-php.cn

HTML5 の記事: ページジャンプを実現する 5 つの方法 (コード共有)

奋力向前

リリース： 2021-08-16 15:37:28

転載

7851 人が閲覧しました

前回の記事「CSSを使ってHTMLフォントに背景画像を追加する方法を教えます」では、CSSを使ってHTMLフォントに背景画像を追加する方法を紹介しました。以下の記事では、html5を使ってページジャンプを実現する方法を紹介しますので、参考になると思いますので、困っている方は参考にしていただければ幸いです。

HTML5 の記事: ページジャンプを実現する 5 つの方法 (コード共有)

詳細を説明するために、以下に 5 つの例を示します。これらの例の主な機能は、5 秒後に同じディレクトリ内のディレクトリに自動的にジャンプすることです。 hello.html (必要に応じて変更してください) ファイル。

1. htmlの実装

<head>
<!-- 以下方式只是刷新不跳转到其他页面 -->
<meta http-equiv="refresh" content="10">
<!-- 以下方式定时转到其他页面 -->
<meta http-equiv="refresh" content="5;url=hello.html"> 
</head>

ログイン後にコピー

利点: シンプル
欠点: Struts Tilesでは使用できません

2 、JavaScript の実装

<script language="javascript" type="text/javascript"> 
// 以下方式直接跳转
window.location.href=&#39;hello.html&#39;;
// 以下方式定时跳转
setTimeout("javascript:location.href=&#39;hello.html&#39;", 5000); 
</script>

ログイン後にコピー

利点: 柔軟性があり、より多くの他の機能と組み合わせることができます
欠点: 異なるブラウザの影響を受けます

3. 相互 Javascript と組み合わせます。実装 (IE)

<span id="totalSecond">5</span>
<script language="javascript" type="text/javascript"> 
var second = totalSecond.innerText; 
setInterval("redirect()", 1000); 
function redirect(){ 
totalSecond.innerText=--second; 
if(second<0) location.href=&#39;hello.html&#39;; 
} 
</script>

ログイン後にコピー

利点: よりユーザーフレンドリー
欠点: firefox はサポートしていません (firefox は、span、p などの innerText 属性をサポートしていません)

4. reciprocal (firefox) の JavaScript 実装と組み合わせる

<script language="javascript" type="text/javascript"> 
var second = document.getElementById(&#39;totalSecond&#39;).textContent; 
setInterval("redirect()", 1000); 
function redirect() 
{ 
document.getElementById(&#39;totalSecond&#39;).textContent = --second; 
if (second < 0) location.href = &#39;hello.html&#39;; 
} 
</script>

ログイン後にコピー

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

<span id="totalSecond">5</span>
<script language="javascript" type="text/javascript"> 
if(navigator.appName.indexOf("Explorer") > -1){ 
document.getElementById(&#39;totalSecond&#39;).innerText = "my text innerText"; 
} else{ 
document.getElementById(&#39;totalSecond&#39;).textContent = "my text textContent"; 
} 
</script>

ログイン後にコピー

3 つのコードを完成させ、4 つの推奨学習を行う

<span id="totalSecond">5</span>

<script language="javascript" type="text/javascript"> 
var second = document.getElementById(&#39;totalSecond&#39;).textContent; 

if (navigator.appName.indexOf("Explorer") > -1)  { 
	second = document.getElementById(&#39;totalSecond&#39;).innerText; 
} else { 
	second = document.getElementById(&#39;totalSecond&#39;).textContent; 
} 

setInterval("redirect()", 1000); 
function redirect() { 
if (second < 0) { 
	location.href = &#39;hello.html&#39;; 
} else { 
	if (navigator.appName.indexOf("Explorer") > -1) { 
		document.getElementById(&#39;totalSecond&#39;).innerText = second--; 
	} else { 
		document.getElementById(&#39;totalSecond&#39;).textContent = second--; 
	} 
} 
} 
</script>

ログイン後にコピー

: Html ビデオチュートリアル

以上がHTML5 の記事: ページジャンプを実現する 5 つの方法 (コード共有)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。