JavaScript实现x秒后自动跳转到一个页面_j avascript倒计时代码

javascript

33 浏览量更新于2023-05-04 评论收藏 37KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

JavaScript实现实现x秒后自动跳转到一个页面秒后自动跳转到一个页面

今天看视频学习时学习了一种新技术，即平时我们在一个页面点击“提交”或“确认”会自动跳转到一个页面。

在网上搜了一下，关于这个技术处理有多种方法，我只记下我在视频里学到的三种：

1、用一个response.sendRedirect(“目标页面.jsp\.htm”);实现直接跳转；

2、有时我们需要有点提示,比如“x秒后自动跳转，若没有跳转，请点击此处”，则可以在myeclipse中调用Snippets中的Delay

Go To URL.会自动生成如下代码：

代码如下:

<!–

// Place this in the ‘head’ section of your page.

function delayURL(url, time) {

setTimeout(“top.location.href='” + url + “‘”, time);

}

//–>

</script>

<!– Place this in the ‘body’ section –>

<a href=”javascript:” onClick=”delayURL(‘myPage.html’,’2000′)”>My Delayed Link</a>

将此代码修改为：

代码如下:

function delayURL(url, time) {

setTimeout(“top.location.href='” + url + “‘”, time);

}

</script>

秒钟之后自动跳转，如果不跳转，请点击下面链接

delayURL(“http://www.hualai.net.cn”, 3000);

</script>

然后将在3秒钟之后直接跳转到“目标页面”。这种方法就是设定几秒钟后跳转则在这过程中页面不会有变化，比如说设定3秒，

然后随着时间的变化3变成2再变成1直至跳转，下面请看第三种方法。

3、把方法2中的代码修改为：

代码如下:

function delayURL(url) {

var delay=document.getElementById(“time”).innerHTML;

//最后的innerHTML不能丢，否则delay为一个对象

if(delay>0){

delay–;

document.getElementById(“time”).innerHTML=delay;

}else{

window.top.location.href=url;

}

setTimeout(“delayURL(‘” + url + “‘)”, 1000);

//此处1000毫秒即每一秒跳转一次

}

</script>

秒钟之后自动跳转，如果不跳转，请点击下面链接

delayURL(“http://www.hualai.net.cn/news/knowledge/265.html”);

</script>

此方法实现的效果为在上一个页面点击完submit后跳转到本页面经过3秒（这个3会递减到0）后跳转到目标页面。

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余0页未读，立即下载

weixin_38502916

粉丝: 2
资源: 942

会员权益专享

JavaScript实现x秒后自动跳转到一个页面

评论0

会员权益专享

最新资源

JavaScript实现x秒后自动跳转到一个页面

评论0

Android studio点击跳转

HTML页面3秒后自动跳转的三种常见方法

JavaScript实现页面5秒后自动跳转的方法

Pc端怎么实现跳转到页面指定位置vue

使用post请求跳转页面

JS实现从照片中自动裁切自已的肖像，并保存到本地

表单检验如何跳转到未检验成功的地方antd2.x

用js写一个校园网自动登陆程序

hbuilderx h5源码

如何制作一个自动打开信封效果的html页面

帮我用video-js写一个能在页面载入时通过视频设备数量和页面自动生成视频监控的html

vue基于bootstrap实现的在线商城前端整站源码

vue3设置完overflow:auo后，跳转页面不保存滚动条位置的问题

nuxt跳转不会回到顶部

html2canvas+jspdf前端生成pdf以及处理分页图片文字被截断问题 注:使用html2canva

vue,路由滚动行为回到顶部

hls 格式播放 js 实例

echarts折线图展示一年的数据

如何用Cesium加载三维模型

会员权益专享

最新资源

html2canvas+jspdf前端生成pdf以及处理分页图片文字被截断问题注:使用html2canva