代码如下：

<div id="box"><p>页面在<span id="Os">5</span>s后跳转</p>
</div>
<script>var Os=document.getElementById("Os");var num=5;var timer=setInterval(function () {num--;Os.innerText=num;if(num==0){window.location.href="https://www.baidu.com/";}},1000)
</script>

在js代码里，我用了setInterval() 方法，此方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。

setInterval(code, milliseconds);        (code是一个代码串，milliseconds（时间），多少时间调用一次）
setInterval(function, milliseconds, param1, param2, ...)  （param是传给执行函数的其他参数，根据情况写）

这个方法对函数或代码串会一直调用，直到 clearInterval() 被调用或窗口被关闭。

clearInterval() 方法

可取消由 setInterval() 函数设定的定时执行操作

<div id="box"><p>页面在<span id="Os">5</span>s后跳转</p><button id="btn" onclick="stop()">停止</button>
</div>
<script>var Os=document.getElementById("Os");var num=5;var timer=setInterval(function () {num--;Os.innerText=num;if(num==0){window.location.href="https://www.baidu.com/";}},1000)function stop() {clearInterval(timer);}
</script>

上个代码，加了个停止。

若你只想执行一次那就用，setTimeout() 方法，和setInterval() 方法使用方法一样，这个只执行一次

页面跳转的方法：

window.location.href="/url" 当前页面打开URL页面

还有好多种跳转的方法：self.location.href="/url" 当前页面打开URL页面
location.href="/url" 当前页面打开URL页面

this.location.href="/url" 当前页面打开URL页面
parent.location.href="/url" 在父页面打开新页面
top.location.href="/url" 在顶层页面打开新页面

原文链接：https://blog.csdn.net/weixin_43937528/article/details/89336188

JS实现倒计时三秒钟跳转到新的页面相关推荐

JS实现倒计时三秒跳转后到新页面
为了是网站的页面更友好,更加人性化,我们往往会在操作错误或是成功的时候进行提示然后跳转到相应的页面.同时为了使页面更加美化,我们往往会加上倒计时跳转功能,也就是使网页上的秒杀呈现倒数显示.下面就是具体 ...
js实现5秒之后跳转到另一个页面
最近在做网上书城项目时,总结了两种方式实现5秒之后跳转到另一个页面. 第一种方式:直接在jsp页面中写入js代码: msg.jsp代码如下: <%@ page language="ja ...
Ext JS 4倒计时：动态加载和新的类系统
Today we're excited to release the first in a series of brand new features in Ext JS 4. Over the nex ...
vue击一个按钮跳转到新的页面
1.跳转外部链接并覆盖当前页 <el-button type="primary" @click="jump">跳转</el-button> ...
Google浏览器设置跳转到新的页面
没想明白为什么Google浏览器默认设置点击新页面会覆盖原来的旧页面,难道国外人习惯不一样吗? 平时用的CTRL+左键感觉还挺方便的,用了同学的Google发现可以直接跳到新的页面,是我out了. 下 ...
PHP——0128练习相关2——js点击button按钮跳转到另一个新页面
js点击button按钮跳转到另一个新页面投稿:whsnow 字体:[增加减小] 类型:转载时间:2014-10-10 我要评论点击按钮怎么跳转到另外一个页面呢?点击图片要跳转到新的页面时,怎 ...
jsp页面页面post传值_在Js页面通过POST传递参数跳转到新页面详解
场景最近在工作中遇到一个需求,有个页面 a.vm,对 ajax 请求的结果进行判断后,获取结果里面的数据传递给一个 URL(b.htm),跳转到新的页面 b.htm. 遇到的问题因为一开始是 GE ...
JavaScript倒计时跳转到另一个页面
需求页面上显示一个倒计时5秒的数字,到了5秒以后跳转到另一个页面案例分析页面上创建一个span用于显示变化的数字,点返回链接直接跳转. 定义一个变量为5,每过1秒调用1次刷新refresh()函 ...
react如何跳转html页面,react中实现点击跳转到新页面方法
实现点击跳转到新页面,可以有两种形式,一个是本地页面打开,一个是本地页面不变跳转到新的页面. (一)页面点击本地页面打开新页面引入ant的Button组件 onClick={()=>{wind ...

JS实现倒计时三秒钟跳转到新的页面

clearInterval() 方法

JS实现倒计时三秒钟跳转到新的页面相关推荐

最新文章

热门文章