在网站中用户访问不存在的页面会进入 404 页面，在 404 页面设置自动跳转到网站的主页是一种非常好的做法。

本文将介绍使用 JavaScript 在 404 页面自动跳转到网站主页页面，并使用 HTML 显式跳转倒计时。

JavaScript 实现倒计时自动跳转到主页页面有两种实现方式：

  • 使用 JS 内置函数 setTimeout() 倒计时并实现自动跳转
  • 使用 JS 内置函数 setInterval() 倒计时并实现自动跳转

创建 HTML 代码

创建 404 页面基本的 HTML 代码：

<html>
  <head>
    <title>404 - 未发现页面</title>
    <link rel="stylesheet" href="https://cdn.staticfile.net/bootstrap/5.3.1/css/bootstrap.min.css">
  </head>
  <body class="font-monospace">
    <div class="container">
      <div class="row">
        <div class="col-12 d-flex flex-column justify-content-center align-items-center">
          <div class="page-content pt-5">
            <h2>抱歉，你访问的页面走丢拉！</h2>
            <p class="py-3">不要慌！<strong id="timeRest" class="fs-5 text-danger ps-2">5</strong> 秒后将自动返回网站首页，请稍候...</p>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

为了简化 CSS 类定义，在代码中使用了 Bootstrap 的 CSS 类。在代码中加载了 Bootstrap CDN，代码复制后可直接运行。

JS使用setInterval()实现倒计时并自动跳转

JavaScript 的内置函数 setInterval() 是每隔一定时间执行一次，它的实现方式是循环调用自己。

1、函数常用语法：

setInterval(func, delay)

2、参数解释：

  • func：每隔 delay 毫秒执行的函数代码，第一次执行是在 delay 毫秒后。
  • delay：代码执行的间隔事件，单位是毫秒（千分之一秒）

3、JS使用setInterval()实现倒计时并自动跳转的示例代码：

var timeRest = 5;
function startTimer() {
  timerInterval = setInterval(() => {
    // 计算剩余的时间
    timeRest--;

    // 在 HTML 标记内显示剩余的时间
    if (timeRest != 0)
      document.getElementById("timeRest").innerHTML = timeRest;

    // 当剩余时间为 0 时，删除 setInterval，并跳转到主页
    if (timeRest==0) {
      clearInterval(timerInterval);
      window.location.replace("/");
    }

  }, 1000);
}
startTimer();

代码解释：

在 js 代码中使用 window.location.replace("/") 方法跳转页面，详细信息查看：JS 跳转新 URL 网页页面的方法对比

JS使用setTimeout()实现倒计时并自动跳转

Jav aScript 的内置函数 setTimeout(func, delay) 是计时结束时执行一次函数代码，可以嵌套调用 setTimeout(func, delay) 函数实现 setInterval() 函数的功能。

1、函数常用语法：

setTimeout(func, delay)

2、参数解释：

  • func：计时结束时执行的函数代码。
  • delay：代码执行的计时时间，单位是毫秒（千分之一秒）

3、JS使用setTimeout()实现倒计时并自动跳转的示例代码：

var timeRest = 5;
function startTimer() {
  // 计算剩余的时间
  timeRest--;

  // 循环调用 setTimeout()
  timerTimeout = setTimeout(startTimer, 1000);

  // 在 HTML 标记内显示剩余的时间
  if (timeRest != 0)
    document.getElementById("timeRest").innerHTML = timeRest;

  // 当剩余时间为 0 时，删除 setTimeout，并跳转到主页
  if (timeRest == 0) {
    clearTimeout(timerTimeout);
    window.location.replace("/");
  }
}
setTimeout(startTimer, 1000);

代码解释：

JS实现倒计时并自动跳转完整代码

JS修改 HTML 显示倒计时并自动跳转的完整代码：

<html>
  <head>
    <title>404 - 未发现页面</title>
    <link rel="stylesheet" href="https://cdn.staticfile.net/bootstrap/5.3.1/css/bootstrap.min.css">
  </head>
  <body class="font-monospace">
    <div class="container">
      <div class="row">
        <div class="col-12 d-flex flex-column justify-content-center align-items-center">
          <div class="page-content pt-5">
            <h2>抱歉，你访问的页面走丢拉！</h2>
            <p class="py-3">不要慌！<strong id="timeRest" class="fs-5 text-danger ps-2">5</strong> 秒后将自动返回网站首页，请稍候...</p>
          </div>
        </div>
      </div>
    </div>
    <script>
      var timeRest = 5;
      function startTimer() {
        timerInterval = setInterval(() => {
          // 计算剩余的时间
          timeRest--;

          // 在 HTML 标记内显示剩余的时间
          if (timeRest != 0)
            document.getElementById("timeRest").innerHTML = timeRest;

          // 当剩余时间为 0 时，删除 setInterval，并跳转到主页
          if (timeRest==0) {
            clearInterval(timerInterval);
            window.location.replace("/");
          }

        }, 1000);
      }
      startTimer();
    </script>
  </body>
</html>

结语

本文介绍了在 JavaScript 中使用 setTimeout() , setInterval() 内置函数在 404 页面倒计时跳转到网站首页页面。