App下載

css怎么跳轉(zhuǎn)頁(yè)面？頁(yè)面跳轉(zhuǎn)的5種方法 ！

猿友 2021-07-01 14:24:35 瀏覽數(shù) (12633)
反饋

我們?cè)谡５木W(wǎng)頁(yè)開發(fā)中往往一個(gè)頁(yè)面是不能滿足我們的需求的，所以我們就需要使用到多頁(yè)面來(lái)進(jìn)行實(shí)現(xiàn)我們的功能，那么今天我們就來(lái)說(shuō)說(shuō)有關(guān)于：“css怎么跳轉(zhuǎn)頁(yè)面？”這個(gè)問題吧！下面是小編查詢和整理的相關(guān)內(nèi)容資料，希望對(duì)大家的學(xué)習(xí)和理解有所幫助！

1、html實(shí)現(xiàn)

代碼如下：

<head>
<!-- 以下方式只是刷新不跳轉(zhuǎn)到其他頁(yè)面 -->
<meta http-equiv="refresh" content="10">
<!-- 以下方式定時(shí)轉(zhuǎn)到其他頁(yè)面 -->
<meta http-equiv="refresh" content="5;url=hello.html"> 
</head>

對(duì)于這個(gè)方法我們實(shí)現(xiàn)會(huì)相對(duì)的比較簡(jiǎn)單，但是不足的點(diǎn)就是 Struts Tiles 中無(wú)法使用。

2、JavaScript實(shí)現(xiàn)

代碼如下：

<script language="javascript" type="text/javascript"> 
// 以下方式直接跳轉(zhuǎn)
window.location.href='hello.html';
// 以下方式定時(shí)跳轉(zhuǎn)
setTimeout("javascript:location.href='hello.html'", 5000); 
</script>

通過(guò)使用JavaScript這個(gè)方法，它是屬于比較靈活可以讓我們結(jié)合更多其他功能的，但是有不足的是會(huì)受到不同瀏覽器的影響。

3、在firefox中結(jié)合倒數(shù)JavaScript實(shí)現(xiàn)

代碼如下：

<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、整合

<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>

小結(jié)：以上的例子都是主要來(lái)實(shí)現(xiàn)在五秒之后自動(dòng)跳轉(zhuǎn)到同一目錄下的 hello.html文件中。

總結(jié)：

關(guān)于“css怎么跳轉(zhuǎn)頁(yè)面？”這個(gè)問題，今天我們也結(jié)束了介紹，如果你有其他的想法也可以分享你的看法和大家一同分享，更多有關(guān)于前端方面的知識(shí)我們都可以在W3Cschool中進(jìn)行學(xué)習(xí)和了解。


HTML CSS JavaScript 前端

0 人點(diǎn)贊