演示:
演示
來源于:
實現(xiàn)代碼:
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="refresh" content="1; url=https://www.dongbd.com/">
<title>定時跳轉(zhuǎn)</title>
</head>
<body>
<h2>此頁面將在1秒后跳轉(zhuǎn)</h2>
</body>
</html>
下面列了五個例子來詳細(xì)說明,這幾個例子的主要功能是:在5秒后,自動跳轉(zhuǎn)到同目錄下的hello.html(根據(jù)自己需要自行修改)文件。
1) html的實現(xiàn)
<head>
<!-- 以下方式只是刷新不跳轉(zhuǎn)到其他頁面 -->
<meta?http-equiv="refresh" content="10">
<!-- 以下方式定時轉(zhuǎn)到其他頁面 -->
<meta?http-equiv="refresh" content="5;url=hello.html">
</head>
優(yōu)點:簡單
缺點:Struts Tiles中無法使用
2) javascript的實現(xiàn)
<script language="javascript"?type="text/javascript">
// 以下方式直接跳轉(zhuǎn)
window.location.href='hello.html';
// 以下方式定時跳轉(zhuǎn)
setTimeout("javascript:location.href='hello.html'", 5000);
</script>
優(yōu)點:靈活,可以結(jié)合更多的其他功能
缺點:受到不同瀏覽器的影響
3) 結(jié)合了倒數(shù)的javascript實現(xiàn)(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='hello.html';
}
</script>
優(yōu)點:更人性化
缺點:firefox不支持(firefox不支持span、div等的innerText屬性)
3′) 結(jié)合了倒數(shù)的javascript實現(xiàn)(firefox)
<script language="javascript"?type="text/javascript">
var?second = document.getElementById('totalSecond').textContent;
setInterval("redirect()", 1000);
function?redirect()
{
document.getElementById('totalSecond').textContent = --second;
if?(second < 0) location.href = 'hello.html';
}
</script>
4) 解決Firefox不支持innerText的問題
<span?id="totalSecond">5</span>
<script?language="javascript" type="text/javascript">
if(navigator.appName.indexOf("Explorer") > -1){
document.getElementById('totalSecond').innerText = "my text innerText";
} else{
document.getElementById('totalSecond').textContent = "my text textContent";
}
</script>
5) 整合3)和3′)
<span?id="totalSecond">5</span>
?
<script?language="javascript" type="text/javascript">
var second = document.getElementById('totalSecond').textContent;
?
if (navigator.appName.indexOf("Explorer") > -1)? {
????second = document.getElementById('totalSecond').innerText;
} else {
????second = document.getElementById('totalSecond').textContent;
}
?
setInterval("redirect()", 1000);
function redirect() {
if (second < 0) {
????location.href = 'hello.html';
} else {
????if (navigator.appName.indexOf("Explorer") > -1) {
????????document.getElementById('totalSecond').innerText = second--;
????} else {
????????document.getElementById('totalSecond').textContent = second--;
????}
}
}
</script>