純html網(wǎng)頁重定向與跳轉(zhuǎn)

    網(wǎng)頁定時跳轉(zhuǎn)至指定鏈接

    演示:

    演示

    提取碼:無
    解壓碼:無

    來源于:

    https://www.cnblogs.com/aszx0413/articles/1886819.html

    實現(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>

    下面列了五個例子來詳細說明,這幾個例子的主要功能是:在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>
    

    給TA贊賞
    共{{data.count}}人
    人已贊賞
    ??
    Npcink上的部份代碼及教程來源于互聯(lián)網(wǎng),僅供網(wǎng)友學習交流,若您喜歡本文可附上原文鏈接隨意轉(zhuǎn)載。
    無意侵害您的權(quán)益,請發(fā)送郵件至 1355471563#qq.com 或點擊右側(cè) 私信:Muze 反饋,我們將盡快處理。
    ?
    購物車
    優(yōu)惠劵
    搜索
    主站蜘蛛池模板: 国产精品视频一区二区三区四| 国产麻豆精品一区二区三区| 国产伦精品一区二区三区四区| 色狠狠色噜噜Av天堂一区| 精品国产一区二区三区不卡 | 国产一区二区内射最近更新| 久久精品无码一区二区WWW| 一区二区三区福利视频| 少妇一夜三次一区二区| 国产香蕉一区二区精品视频 | 另类ts人妖一区二区三区| 夜精品a一区二区三区| 久久精品国产一区二区三区 | 国产一区二区三区免费看| 中文字幕av无码一区二区三区电影| 2018高清国产一区二区三区 | 国产一区三区二区中文在线 | 无码人妻精品一区二区三区久久久 | 亚洲国产成人一区二区三区| 国产无人区一区二区三区| 国产成人精品一区二区A片带套| 伦精品一区二区三区视频| 亚洲av综合av一区二区三区| 亚洲高清一区二区三区| 国产伦精品一区二区三区免费迷| 国产AV一区二区精品凹凸| 亚洲男人的天堂一区二区| 无码人妻精品一区二区蜜桃网站 | 无码av免费一区二区三区| 在线观看国产区亚洲一区成人 | 欧美日本精品一区二区三区| 卡通动漫中文字幕第一区| 亚洲一区二区三区国产精品无码| 国产精品无码不卡一区二区三区 | 好湿好大硬得深一点动态图91精品福利一区二区 | 色天使亚洲综合一区二区| 色婷婷av一区二区三区仙踪林| 久久无码一区二区三区少妇| 99久久精品午夜一区二区| 精品3d动漫视频一区在线观看| 日韩一区精品视频一区二区 |