html meta标签重定向（倒计时跳转）

最新推荐文章于 2024-12-20 17:35:16 发布

原创最新推荐文章于 2024-12-20 17:35:16 发布 · 5.3k 阅读

3 ·

CC 4.0 BY-SA版权

HTML学习专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用HTML的<meta>标签实现页面的自动重定向，并通过JavaScript添加倒计时效果，增强用户体验。

使用 <meta> 元素来重定向跳转：

<meta http-equiv="Refresh" content="5;url=http://blog.youkuaiyun.com/kill_bugs" />

添加以上一句话就可以倒计时5s后跳转了！

界面添加倒计时效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="refresh" content="5;url=http://www.w3school.com.cn">
    <title>Title</title>
    <script type="text/javascript">
        window.onload = function () {
            var i = 4;
            var tim = document.getElementById("timers");
            var timer = setInterval(function () {
                if (i == -1) {
//                    window.location.href="http://blog.youkuaiyun.com/kill_bugs";
                    clearInterval(timer);
                } else {
                    tim.innerHTML = i;
                    --i;
                }
            }, 1000);

        }
    </script>
</head>
<body>
<p>
    对不起。我们已经搬家了。您的 URL 是 <a href="http://blog.youkuaiyun.com/kill_bugs">http://blog.youkuaiyun.com/kill_bugs</a>
</p>

<p>您将在 <span class="timeShow" id="timers">5</span> 秒内被重定向到新的地址。</p>

<p>如果超过 5 秒后您仍然看到本消息，请点击上面的链接。</p>
</body>
</html>