BOM之Location属性（对象）之页面跳转的实现

超、凢脫俗 2022-12-23 00:52 135阅读 0赞

## 本次案例将实现 5秒后跳转页面效果： ##

先看效果图：  
![在这里插入图片描述][20201121115126737.png_pic_center]

*核心思路如下：*  
location.href = ‘http://www.baidu.com’;跳转页面核心代码

1.  定义一个跳转页面的方法，若时间大于5则减减，并实时更新div里面的内容。若等于0则跳转。
2.  添加按钮监听事件，用setInterval定时器函数记时间，一秒调用一次。

`全部代码如下：`

<body>
        <button>点击跳转页面</button>
        <div>跳转时间提示</div>
        <script>
            var myBtn = document.querySelector('button');
            var myDiv = document.querySelector('div');
            var toTime = 5;
            //点击按钮调用跳转方法
            myBtn.addEventListener('click',function () { 
                setInterval('toNewpage()',1000);
            })
            //跳转方法
            function toNewpage() { 
                if (toTime > 0) { 
                    myDiv.innerHTML = '页面将在'+ toTime +'秒后跳转到百度网址';
                    toTime--;
                }else { 
                    location.href = 'http://www.baidu.com';
                }
            }
        </script>
    </body>

[20201121115126737.png_pic_center]: /images/20221120/52f19bc3f61b47e0be679643096f929c.png

发表评论取消回复

表情：

评论列表（有 0 条评论，135人围观）

还没有评论，来说两句吧...

相关阅读

相关 uni-app 之页面跳转

uni-app 之页面跳转 <navigator url="/pages/home/home" hover-class="navigator-hover">

灰太狼/ 2023年10月15日 15:57/ 0 赞/ 39 阅读

相关 html标签（实现几秒之内页面跳转）

<html> <head> <title>Title</title> <base href="<%=request.getCon

绝地灬酷狼/ 2023年06月07日 03:17/ 0 赞/ 12 阅读

相关详细解析BOM中Location对象

详细解析BOM中Location对象 Location对象包含有关当前URL的信息。 // href 返回完整的URL console.log(

我就是我/ 2023年02月15日 10:16/ 0 赞/ 23 阅读

相关安卓入门之页面跳转

1.android studio 新建项目 2.新建跳转后的页面 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_

Myth丶恋晨/ 2022年12月25日 02:54/ 0 赞/ 205 阅读

相关 BOM之Location属性（对象）之页面跳转的实现

本次案例将实现 5秒后跳转页面效果：先看效果图： ![在这里插入图片描述][20201121115126737.png_pic_center] 核心思路如下：

超、凢脫俗/ 2022年12月23日 00:52/ 0 赞/ 136 阅读

相关 location href、parent location href、top location href、window open实现页面跳转

![Center][] 如果D页面中有form的话, <form>: form提交后D页面跳转 <form target="\_blank">: form

r囧r小猫/ 2022年08月06日 05:19/ 0 赞/ 222 阅读

相关 JQuery 之Ajax 的重跳转页面

//由于封装之后的ajax，返回从数据库得到的数据，此时想在这个地方完成页面的跳转将不支持，可以通过下面的方法（页面的JS）间接完成需要跳转的页面 <script>

た入场券/ 2022年05月08日 12:08/ 0 赞/ 364 阅读

相关 BOM属性对象方法

本文原链接：[https://cloud.tencent.com/developer/article/1018747][https_cloud.tencent.com_deve

水深无声/ 2021年12月23日 16:47/ 0 赞/ 275 阅读

相关 BOM（定时器的用法，location对象）

间歇调用（在指定的时间过后执行代码）和超时调用（每隔指定的时间就执行一次代码）。 //这种写法不推荐，容易出错，不容易扩展 setTimeout("alert('Lee

ゞ浴缸里的玫瑰/ 2021年10月01日 01:24/ 0 赞/ 257 阅读

相关 Servlet实现页面的跳转

Servlet实现页面的跳转有2种方式：转发与重定向。 1、转发转发是在服务器端起作用的，当使用 forward() 方法时，Servlet 容器传递HTTP请求，从

灰太狼/ 2021年09月19日 00:16/ 0 赞/ 451 阅读