5s后自动跳转页面

最新推荐文章于 2024-06-05 00:30:00 发布

龙眸

最新推荐文章于 2024-06-05 00:30:00 发布

阅读量3.5k

点赞数 2

分类专栏：笔记文章标签： javascript html 前端

本文链接：https://blog.csdn.net/weixin_52065872/article/details/124557717

版权

笔记专栏收录该内容

73 篇文章 1 订阅

订阅专栏

案例说明

5s后自动跳转页面（注意第一次刷新时页面产生的空白）

案例分析

各方面分析

案例实现代码

<!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>Document</title>
</head>

<body>
    <button>点击</button>
    <div></div>
    <script>
        var btn = document.querySelector('button');
        var div = document.querySelector('div');
        btn.addEventListener('click', function() {
            location.href = 'http://www.jd.com';
        })
        var timer = 5;
        // setInterval(function() {
        //         if (timer == 0) {
        //             location.href = 'http://www.jd.com';
        //         } else {
        //             div.innerHTML = '你将在' + timer + '秒后跳转到首页'
        //             timer--;
        //         }
        //     }, 1000)
        countDown(); // 我们先调用一次这个函数，防止第一次刷新页面有空白 
        setInterval(countDown, 1000)

        function countDown() {
            if (timer == 0) {
                location.href = 'http://www.jd.com';
            } else {
                div.innerHTML = '你将在' + timer + '秒后跳转到首页'
                timer--;
            }
        }
    </script>
</body>

</html>