各种页面定时跳转(倒计时跳转)代码总结

2023年6月11日下午12:55 • JavaScript

“各种页面定时跳转(倒计时跳转)代码总结”是一个非常常见的前端需求，现在我来为大家介绍如何实现这个功能。

前置知识

在学习页面定时跳转之前，需要先了解一些前置知识：

HTML 与 CSS的编写与使用；
JS的基础语法和基本操作；
对定时器的理解以及使用方法。

分别实现普通定时跳转和倒计时跳转

实现普通定时跳转

普通定时跳转也就是固定时间内跳转，可以通过以下代码实现：

function redirect() {
    window.location.href = "http://www.example.com"; // 将URL替换为需要跳转的网址
}
setTimeout(redirect, 3000); // 将 3000 替换为需要的时间间隔，单位是毫秒

以上代码中，使用了setTimeout()方法来制定一个执行一次的定时器，在3秒钟后执行redirect()函数，redirect()函数内部调用了window.location.href方法来跳转到指定页面。

实现倒计时跳转

倒计时跳转比较常见，通常我们需要根据倒计时计时器的剩余时间来更新显示信息。请看以下代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>倒计时跳转网页</title>
</head>
<body>
    <div>
        <h2 id="countdown">指定时间内跳转到其他页面：</h2>
        <button onClick="startCountdown(3000);">开始倒计时</button> <!-- 将 3000 替换为需要的时间间隔，单位是毫秒 -->
    </div>
    <script>
        function startCountdown(time) {
            var countdownElem = document.getElementById("countdown");
            var timer = setInterval(function() {
                time -= 1000; // 每秒减少 1000ms
                if (time < 0) {
                    clearInterval(timer);
                    window.location.href = "http://www.example.com"; // 将URL替换为需要跳转的网址
                } else {
                    var minutes = parseInt(time / 60000);
                    var seconds = parseInt((time - minutes * 60000) / 1000);
                    countdownElem.innerHTML = "跳转倒计时：" + minutes + " 分钟" + seconds + " 秒";
                }
            }, 1000);
        }
    </script>
</body>
</html>

以下是代码的实现思路：