App下載

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

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

我們?cè)谡5木W(wǎng)頁(yè)開(kāi)發(fā)中往往一個(gè)頁(yè)面是不能滿(mǎn)足我們的需求的,所以我們就需要使用到多頁(yè)面來(lái)進(jìn)行實(shí)現(xiàn)我們的功能,那么今天我們就來(lái)說(shuō)說(shuō)有關(guān)于:“css怎么跳轉(zhuǎn)頁(yè)面?”這個(gè)問(wèn)題吧!下面是小編查詢(xún)和整理的相關(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的問(wèn)題

代碼如下所示:

<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è)問(wèn)題,今天我們也結(jié)束了介紹,如果你有其他的想法也可以分享你的看法和大家一同分享,更多有關(guān)于前端方面的知識(shí)我們都可以在W3Cschool中進(jìn)行學(xué)習(xí)和了解。


0 人點(diǎn)贊