JavaScript实现5秒后跳转界面

最新推荐文章于 2024-08-18 10:54:05 发布

拂晓等明月

最新推荐文章于 2024-08-18 10:54:05 发布

阅读量2.3k

点赞数

分类专栏： javascript练习

本文链接：https://blog.csdn.net/qq_61320547/article/details/125314631

版权

javascript html 前端

javascript练习专栏收录该内容

20 篇文章 0 订阅

订阅专栏

打开代码，静待5秒后跳转新界面

代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>5秒后跳转界面</title>
    <style>
        .box {
            width: 500px;
            height: 400px;
            margin: auto;
            text-align: center;
            line-height: 400px;
            font-size: 34px;
            background-color: aquamarine;
        }
    </style>
</head>

<body>
    <div class="box">
        距离跳转时间还有5秒
    </div>

    <script>
        mop(); //封装到函数里面，先调用一次防止第一次刷新显示空白

        function mop() {
            var box = document.querySelector('.box')
            var shi = 5;
            setInterval(function() {
                if (shi == 0) {
                    location.href = 'https://ys.mihoyo.com/';
                } else {
                    box.innerHTML = '距离跳转时间还有' + shi + '秒';
                    shi--;
                }
            }, 1000)
        }
    </script>
</body>

</html>