首頁 >web前端 >html教學 >html5篇：實現頁面跳躍的5種方式（程式碼分享）

html5篇：實現頁面跳躍的5種方式（程式碼分享）

奋力向前轉載: 2021-08-16 15:33:017846瀏覽

在

之前的文章《一招教你使用css為HTML字體新增背景圖》中，為大家介紹如何使用css為HTML字體新增背景圖的方法。以下這篇文章跟大家介紹使用html5怎麼實現頁面跳躍的方法，有一定的參考價值，有需要的朋友可以參考一下，希望對你們有所助。

下面列了五個例子來詳細說明，這幾個例子的主要功能是：在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.結合了倒數的javascript實作（firefox）

<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中文網其他相關文章！

JavaScript html5 firefox css html struts

陳述：

本文轉載於：cnblogs.com。如有侵權，請聯絡admin@php.cn刪除

上一篇：html網頁中如何實現居中效果（程式碼分享）下一篇：html網頁中如何實現居中效果（程式碼分享）

看更多