|
下面列了五個(gè)例子來詳細(xì)說明,，這幾個(gè)例子的主要功能是：在5秒后,，自動(dòng)跳轉(zhuǎn)到同目錄下的hello.html（根據(jù)自己需要自行修改）文件。
1) html的實(shí)現(xiàn)
<head>
<meta http-equiv="refresh" content="10">
<meta http-equiv="refresh" content="5;url=hello.html">
</head>
優(yōu)點(diǎn)：簡單
缺點(diǎn)：Struts Tiles中無法使用
2) javascript的實(shí)現(xiàn)
<script language="javascript" type="text/javascript">
window.location.href='hello.html';
setTimeout("javascript:location.href='hello.html'", 5000);
</script>
優(yōu)點(diǎn)：靈活,，可以結(jié)合更多的其他功能
缺點(diǎn)：受到不同瀏覽器的影響
3) 結(jié)合了倒數(shù)的javascript實(shí)現(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)點(diǎn)：更人性化
缺點(diǎn)：firefox不支持（firefox不支持span,、div等的innerText屬性）
3') 結(jié)合了倒數(shù)的javascript實(shí)現(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>
------------------------------------- 【HTML頁面跳轉(zhuǎn)效果】
使用格式：在頁面中插入
<meta HTTP-EQUIV="Page-Enter"
CONTENT="revealtrans(duration=1.0, transition=12)">
<meta
HTTP-EQUIV="Page-Exit" CONTENT="revealtrans(duration=1.0,
transition=12)"> duration=時(shí)間 Transitionv=方式 說明：duration為頁面切換的時(shí)間長度，3.000表示3秒鐘，一般可以直接輸入3便可,；transition為切換效果,，從1-23共22種不同的切換效果，其中23為隨機(jī)效果,。 效果
Content Transitionv 盒狀收縮 RevealTrans 0 盒狀展開 RevealTrans 1 圓形收縮
RevealTrans 2 圓形展開 RevealTrans 3 向上擦除 RevealTrans 4 向下擦除 RevealTrans
5 向左擦除 RevealTrans 6 向右擦除 RevealTrans 7 垂直百頁窗 RevealTrans 8 水平百頁窗
RevealTrans 9 橫向棋盤式 RevealTrans 10 縱向棋盤式 RevealTrans 11 溶解 RevealTrans
12 左右向中部收縮 RevealTrans 13 中部向左右展開 RevealTrans 14 上下向中部收縮 RevealTrans
15 中部向上下展開 RevealTrans 16 階梯狀向左下展開 RevealTrans 17 階梯狀向左上展開 RevealTrans
18 階梯狀向右下展開 RevealTrans 19 階梯狀向右上展開 RevealTrans 20 隨機(jī)水平線 RevealTrans
21 隨機(jī)垂直線 RevealTrans 22 隨機(jī) RevealTrans 23 |
