zoukankan      html  css  js  c++  java
  • 404页面 3秒后跳到首页 实现

    ---恢复内容开始---

    当我们访问一个页面不存在的时候,就会跳到404页面

    一般网站都在在404页面中做一个处理,

    就是当用户3秒种内还没有任何操作的话,就会自动跳转到其它页面

    技术实现有两种方法

    1. 在404页面中的header间加上

    <meta http-equiv=”refresh” content=”3;url=http://你跳转的网站”>

    2. 用户JS实现location

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=GBK">
    <title>404 Not Found</title>
    </head>
    <body>
     <h1>找不到指定的页面</h1>
     <span id="totalSecond">3</span>秒后自动返回
    </body>
    <script language="javascript" type="text/javascript">
    <!--
        var second = document.getElementById('totalSecond').textContent;
        if (navigator.appName.indexOf("Explorer") > -1)  //判断是IE浏览器还是Firefox浏览器,采用相应措施取得秒数
        {
            second = document.getElementById('totalSecond').innerText;
        } else
        {
            second = document.getElementById('totalSecond').textContent;
        }
        setInterval("redirect()", 1000);  //每1秒钟调用redirect()方法一次
        function redirect()
        {
            if (second < 0)
            {
                location.href = 'http://要跳转的网站';
            } else
            {
                if (navigator.appName.indexOf("Explorer") > -1)
                {
                    document.getElementById('totalSecond').innerText = second--;
                } else
                {
                    document.getElementById('totalSecond').textContent = second--;
                }
            }
        }
    -->
    </script>
    </html>

    ---恢复内容结束---

    当我们访问一个页面不存在的时候,就会跳到404页面

    一般网站都在在404页面中做一个处理,

    就是当用户3秒种内还没有任何操作的话,就会自动跳转到其它页面

    技术实现有两种方法

    1. 在404页面中的header间加上

    <meta http-equiv=”refresh” content=”3;url=http://你跳转的网站”>

    2. 用户JS实现location

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=GBK">
    <title>404 Not Found</title>
    </head>
    <body>
     <h1>找不到指定的页面</h1>
     <span id="totalSecond">3</span>秒后自动返回
    </body>
    <script language="javascript" type="text/javascript">
    <!--
        var second = document.getElementById('totalSecond').textContent;
        if (navigator.appName.indexOf("Explorer") > -1)  //判断是IE浏览器还是Firefox浏览器,采用相应措施取得秒数
        {
            second = document.getElementById('totalSecond').innerText;
        } else
        {
            second = document.getElementById('totalSecond').textContent;
        }
        setInterval("redirect()", 1000);  //每1秒钟调用redirect()方法一次
        function redirect()
        {
            if (second < 0)
            {
                location.href = 'http://要跳转的网站';
            } else
            {
                if (navigator.appName.indexOf("Explorer") > -1)
                {
                    document.getElementById('totalSecond').innerText = second--;
                } else
                {
                    document.getElementById('totalSecond').textContent = second--;
                }
            }
        }
    -->
    </script>
    </html>
  • 相关阅读:
    不支持ie9一下代码
    jquery ajax done 函数 异步调用方法中不能给全局变量赋值的原因及解决办法
    WaitMe是一款使用CSS3来创建加载动画的jQuery插件
    Masked Input这个jQuery插件让用户能够按照预先设定好的固定格式输入数据(如日期、电话号码等)
    Autosize插件允许textarea元素根据录入的内容自动调整元素的高度
    两个列表选项插件bootstrap-duallistbox.js
    jquery滚动插件slimscroll
    modernizr.custom.js应用
    bootbox基于bootstrap的扩展弹窗
    洛谷P3503 [POI2010]KLO-Blocks 单调栈
  • 原文地址:https://www.cnblogs.com/small-gray/p/5011948.html
Copyright © 2011-2022 走看看