这里是文章模块栏目内容页
如何制作一个可以倒计时跳转的404页面

404页面常规应该具备以下几个部分内容:

网站logo和网址名称

错误信息输出:例如 404,您要找的页面被小编弄丢了!

站点导航:可以返回首页,可以选择访问其他相关页面;

倒计时自动跳转功能,例如倒数3秒后,自动为用户跳转到站点的首页;

其他,用于宣传站点的软性广告内容;


从以上几个因素来设计一个404页面,即显得页面简洁,一目了然,用户收到了友好提示,有知道接下来去干嘛。而不是让用户一怒之下关闭站点,白白错失了用户的流量。


整个页面,不应该设计得过于花哨,比如logo和站点名称,排版整齐居中。


站点导航,列出3-5个 可以选择的跳转内容即可,千万不要做成一个 站点地图一样,用户一看并不知道接下来去哪找内容。

下面主要来描述倒计时跳转这个实现技术。通常是用js 实现倒计时跳转。

      <script> 
      function gohome(){
          var redirect_url ="<?php echo $redirect_url;?>";          
          var fun = function(){
              var t = parseInt(document.getElementById("jump")[removed] );              
              if(t===0){
                  [removed].href = redirect_url;
              }else{
                  t =  t-1;
                  document.getElementById("jump")[removed] = t;
             }
          }
          setInterval(fun, 1000);
      }
      gohome();
      
      
      </script>

这段是js 3秒跳转的倒计时代码。

 <div class="row" style="justify-content: center;">
 
        <div class="col-md-6">
            <div class="ibox-content">
           <h3 langtag="info-register"><i class="fa fa-info-circle fa-lg"></i> 系统信息提示</h3>
       
        
           <ol class="">
                <li class="text-info"> <?php echo $message;?></li>
           </ol>
            <div class="form-group">
                <a style="margin-left: 2.1em;" class=" fa fa-home" href="<?php echo $redirect_url;?>"> 点击这里进行跳转! (<span id="jump">3</span> 秒)</a>
            </div>
          
             
          
            </div>
        </div>
    </div>

上面是一段 bootstrap 样式,制作的 提示html代码。

需要在 页面中通过php代码给htm代码输出 message 参数和 redirect_url 跳转地址。

这样,当用户打开页面后,倒数3秒,既能自动跳转到 redirect_url 地址。

好了,本文描述完整结束。


欢迎您学习到一点小技巧,和我一起交流 js和php的开发技术。