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

时间:2024-04-18 10:00:55 

今天看视频学习时学习了一种新技术,即平时我们在一个页面点击“提交”或“确认”会自动跳转到一个页面。
在网上搜了一下,关于这个技术处理有多种方法,我只记下我在视频里学到的三种:
1、用一个response.sendRedirect("目标页面.jsp\.htm");实现直接跳转;
2、有时我们需要有点提示,比如“x秒后自动跳转,若没有跳转,请点击此处”,则可以在myeclipse中调用Snippets中的Delay Go To URL.会自动生成如下代码:


<script language="JavaScript1.2" type="text/javascript">
<!--
// 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>


将此代码修改为:


<script language="JavaScript1.2" type="text/javascript">
function delayURL(url, time) {
setTimeout("top.location.href='" + url + "'", time);
}
</script>
<span id="time" style="background: red">3</span>
秒钟之后自动跳转,如果不跳转,请点击下面链接
<a href="目标页面.jsp">目标页面</a>
<script type="text/javascript">
delayURL("http://www.hualai.net.cn", 3000);
</script>


然后将在3秒钟之后直接跳转到“目标页面”。这种方法就是设定几秒钟后跳转则在这过程中页面不会有变化,比如说设定3秒,然后随着时间的变化3变成2再变成1直至跳转,下面请看第三种方法。
3、把方法2中的代码修改为:


<script language="JavaScript1.2" type="text/javascript">
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>
<span id="time" style="background: red">3</span>
秒钟之后自动跳转,如果不跳转,请点击下面链接
<a href="目标页面.jsp">主题列表</a>
<script type="text/javascript">
delayURL("http://www.hualai.net.cn/news/knowledge/265.html");
</script>


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

标签:页面跳转,跳转
0
投稿

猜你喜欢

  • CentOS7 LNMP+phpmyadmin环境搭建 第三篇phpmyadmin安装

    2023-10-17 03:23:18
  • 30步检查SQL Server安全列表

    2008-12-18 14:28:00
  • Python中字符串的基础介绍及常用操作总结

    2022-04-12 18:01:03
  • python timestamp和datetime之间转换详解

    2021-02-07 11:17:51
  • python 安装impala包步骤

    2023-10-16 04:37:28
  • 将有安全问题的SQL过程删除,比较全面

    2007-08-06 14:46:00
  • Vue组件公用方法提取mixin实现

    2024-06-07 16:02:47
  • 制作Dreamweaver活动菜单条

    2008-10-03 20:59:00
  • pandas 根据列的值选取所有行的示例

    2023-10-13 16:19:38
  • 教你制作IBM LOGO的方法

    2007-10-23 13:34:00
  • 详解AJAX核心 —— XMLHttpRequest 对象

    2010-03-31 14:49:00
  • python pandas query的使用方法

    2023-01-14 06:23:33
  • pandas将numpy数组写入到csv的实例

    2021-02-07 00:51:00
  • python实现用于测试网站访问速率的方法

    2023-07-28 19:12:02
  • Python通过递归获取目录下指定文件代码实例

    2021-02-24 15:08:51
  • python中利用h5py模块读取h5文件中的主键方法

    2022-07-26 12:02:36
  • vue使用el-upload上传文件及Feign服务间传递文件的方法

    2024-04-28 10:54:45
  • python实现超市管理系统(后台管理)

    2022-08-17 06:50:22
  • Go语言实现选择法排序实例

    2024-04-25 15:29:33
  • PHP date()格式MySQL中插入datetime方法

    2024-05-13 09:51:39
  • asp之家 网络编程 m.aspxhome.com