错误页面5秒后自动跳转

时间：2024-03-07 14:21:34

这篇文章仅对一些初级前端适用，大牛请绕道

需求分析

1、这是一篇关于页面跳转方面的代码，自己写的。转载请附上本文地址。

2、很多时候我们做网站的都是要设置一下错误页面的，所以，404页面对于站长来说很重要，同时有时候我们也会想，只有一个错误的页面怎么好，当用户访问我们错误页面的时候如何让它过一段时间跳转这是一个问题。解决方法有很多，不同的场合用到的代码也不一样。下面我来写下我的。

技术解析

1、在这里我们用到两个定时器函数（这个应该就是初学者不知道如何下手的关键吧）

//function为函数，time为执行时间
var fun = setTimeout(function(){},time);
//清除定时器方法
window.clearTimeout(fun);

 

这个函数接受两个参数，一个为执行的函数，一个是执行的时间，我就不多说了，想了解直接百度吧。关键一点是这个是只执行一次。

//function为函数，time为执行时间
var fun = setInterval(function(){},time);
//清除定时器方法
window.clearInterval(fun);

这个函数也是定时器函数，功能和setTimeout函数一样，唯一不一样的地方就是这个函数可以执行多次，后面的时间为执行的周期。灵活应用请多做练习。

好了，吹的也差不多了。下面附上跳转代码，这个是我写的访问错误页面直接跳转上层目录，如果不想这样写，想要访问错误页面直接跳转到指定的页面的话可以把代码中的  window.location.href = urltwo;这段代码中的urltwo改成你自己想要跳转的网址就可以了。

同时上面有一个时间倒计时，我来讲下吧，用到的是setInterval()函数，容易出错的地方就是在秒数赋值的时候会出现赋值后未生效或者是执行后数字只是变了一次，原因在于js语言的机制。解决方法就是在setInterval()的执行函数之上先初始化一个变量，然后在这个函数中的一个方法中执行的时候把这个变量进行重新的赋值，就像我的在下面的sumtime方法中写的  sum = sum-1.好了，易出问题的已经说完了，下面直接上代码。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>未知页面，5秒后跳转。</title>
</head>
<body>
<style>
@charset "utf-8";
*{ margin: 0; padding: 0;}
html { width:100%;font-family:"微软雅黑",Helvetica, sans-serif;}
body{ width:100%; min-width: 1200px; overflow-x:hidden; font-size:10px;}
a{ text-decoration: none; color:#4b4b4b;}
input{outline: none; border: none; margin-top: -2px;margin-bottom: 1px;vertical-align: middle;}
h1,h2,h3,h4,h5,h6{ font-weight:normal;}
li,dl,dt,dd{ list-style:none;}
img{ border-style:none; }
/*******************************************头部************************************************/
.contant{position: relative;display: block;width: 500px;height: 300px;margin: 0 auto;background: #e2e8f5;font-size: 1rem;color: #000000;font-weight: bold;}
.contant .article{position: absolute;top: 50%;left: 50%;display: block;width: 100%;text-align: center;transform: translate(-50%,-50%);}
</style>
<div class="contant">
    <div class="article">
        <p>页面中没有内容，你访问了一个无效的页面</p>
        <br />
        <p><abbr id="countdown" title="描述">5</abbr>秒后自动跳转。</p>
    </div>
</div>
<script type="text/javascript">
    setTimeout(function(){
        var url = window.location.href;
        var urlone,urltwo;
        urlone = url.substr(0,url.lastIndexOf("/"));
        urltwo = urlone.substr(0,urlone.lastIndexOf("/"));
        window.location.href = urltwo;
    },5000);
    var miao;
    var sum = 5;
    setInterval(sumtime,1000);
    function sumtime(){
        sum = sum-1;
        document.querySelectorAll(\'#countdown\')[0].innerHTML = sum;
    }
</script>
</body>
</html>

 

相关文章