Pink老师JavaScript课堂案例 - 页面跳转倒计时

Codefreyy

于 2022-03-20 12:51:17 发布

阅读量112

点赞数

分类专栏：课程案例文章标签：前端 javascript

本文链接：https://blog.csdn.net/godfreyyyy/article/details/123611073

版权

课程案例专栏收录该内容

26 篇文章 2 订阅

订阅专栏

效果

代码

<body>
    <button>通往未来</button>
    <div></div>
    <script>
        // 获取元素
        var btn = document.querySelector('button');
        var div = document.querySelector('div');
        //初始时间
        time = 5;
        //为按钮添加事件
        btn.addEventListener('click', function () {

            var timer = setInterval(function () {
                if (time == 0) {    //如果时间减到了0，跳转至首页（或其他指定页面）
                    location.href = 'http://www.baidu.cn';
                    clearTimeout(timer);
                }
                else {          //时间不等于零时，显示还有多少时间将跳转，多少时间即time，每执行一次setInterval，都会因为time-- 而减1
                    div.innerHTML = '未找到该页面，'+time + '秒之后将返回首页';
                    time--;
                }
            }, 1000);
            //每过1秒执行一次

        })
    </script>
</body>

Codefreyy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Pink老师JavaScript课堂案例 - 页面跳转倒计时

var timer = setInterval(function () { if (time == 0) { //如果时间减到了0，跳转至首页（或其他指定页面） location.href = 'http://www.baidu.cn'; clearTimeout(timer); } else { //时间不等
复制链接

扫一扫