js控制5秒后页面自动跳转

最新推荐文章于 2023-11-04 00:03:25 发布

我一定要早起

最新推荐文章于 2023-11-04 00:03:25 发布

阅读量3.5k

点赞数 1

分类专栏： JS 文章标签： html5 javascript

本文链接：https://blog.csdn.net/eaglewyy/article/details/48231999

版权

JS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

分别用 setTimeout() 和 setInterval() 实现

1.setTimeout()

<!DOCTYPE html>
<html>
<body>
    <span id="jumpTo">5</span>秒后自动跳转到http://www.baidu.com/
    <script>
    countDown(5);
    function countDown(secs) {
        var jumpTo = document.getElementById("jumpTo");
        jumpTo.innerHTML = secs;
        if (--secs > 0)
            setTimeout("countDown(" + secs + ")", 1000);
        else
            location.href = "http://www.baidu.com/";
    }
    </script> 
</body>
</html>

2.setInterval()，需要clearInterval()函数配合

<!DOCTYPE html>
<html>
<body>
    <span id="jumpTo">5</span>秒后自动跳转到http://www.baidu.com/
    <button id="btnJump" onclick="location = 'http://www.baidu.com'" >立刻跳转</button>
    <script>
        autoRedirect();
        function autoRedirect() {
            var casetime = {
                init: function () {
                    window.zibrtimer = setInterval(this.change, 1000);
                },
                change: function () {
                    var time = document.getElementById("jumpTo").innerHTML;
                    time = parseInt(time);
                    time--;
                    document.getElementById("jumpTo").innerHTML = time;
                    if (time == 0) {
                        window.clearInterval(window.zibrtimer);
                        alert("a");
                        location.href = "http://www.baidu.com"
                        return;
                    }
                },

            };
            casetime.init();
        }
    </script>
</body>
</html>