HTML 重定向 10 秒倒计时

在本文中，我们将介绍如何使用 HTML 实现一个重定向至另一个页面，并在用户跳转前显示一个 10 秒倒计时的效果。

阅读更多：HTML 教程

什么是重定向？

重定向是指用户访问某个页面后，自动跳转至另一个指定的页面。这种技术常被用于网站的跳转、页面更新或错误处理等情况下。

HTML 重定向

要实现一个 HTML 重定向，我们可以借助于<meta>标签和content属性。<meta>标签可用于在 HTML 页面中设置元数据，其中http-equiv属性用于指定 HTTP 头部的名称，content属性用于指定其值。

下面是一个简单的示例，将页面重定向至另一个URL：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="refresh" content="5; url=http://example.com">
</head>
<body>
    <h1>正在跳转...</h1>
    <p>您将在 5 秒后自动跳转至 <a href="http://example.com">example.com</a></p>
</body>
</html>

上述代码中，<meta>标签的http-equiv属性被设置为”refresh”，表示刷新页面。而content属性则指定了刷新的时间间隔（单位为秒）和要跳转的URL。

在上述示例中，用户将在5秒后被重定向至http://example.com，同时页面将显示一段提示文字，告知用户正在进行跳转。

实现 10 秒倒计时

为了在重定向前进行倒计时，我们需要使用一些 JavaScript 代码。

下面是一个使用 JavaScript 实现 10 秒倒计时效果的示例：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="refresh" content="10; url=http://example.com">
    <script>
        var countdown = 10;
        var countdownElement = document.getElementById("countdown");

        function updateCountdown() {
            countdown--;

            if (countdown > 0) {
                countdownElement.innerHTML = countdown;
                setTimeout(updateCountdown, 1000);
            } else {
                location.href = "http://example.com";
            }
        }

        updateCountdown();
    </script>
</head>
<body>
    <h1>正在跳转...</h1>
    <p>您将在 <span id="countdown">10</span> 秒后自动跳转至 <a href="http://example.com">example.com</a></p>
</body>
</html>

在上述代码中，我们首先利用 JavaScript 声明了一个变量countdown，并初始化为 10，表示倒计时的初始值。之后，使用getElementById方法获取到页面中的countdown元素，用于显示倒计时的秒数。

接下来，定义一个updateCountdown函数，用于更新倒计时的数值。在函数内部，首先将countdown减1，然后判断是否大于0。如果大于0，则更新倒计时显示的数值，并通过setTimeout函数实现每隔1秒调用一次updateCountdown函数。如果小于等于0，则利用location.href进行页面重定向。

最后，在具体的 HTML 内容中，我们使用<span>标签和id属性为倒计时元素创建一个唯一的标识，方便之后的 JavaScript 代码进行操作。

当用户访问该页面时，页面将会显示一个倒计时为10秒的效果，并在倒计时结束后自动跳转至http://example.com。