JavaScript实现x秒后自动跳转

web001

浏览: 96312 次
性别:
来自: 天津

最近访客更多访客>>

songdawei001

xieye

zhangle

yczoutao

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javascript

javascript 网站建设

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

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

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

2、有时我们需要有点提示,比如“x秒后自动跳转，若没有跳转，请点击此处”，则可以在myeclipse中调用Snippets中的Delay Go To URL.会自动生成如下代码：

Js代码  
<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>   

将此代码修改为：

Js代码  
<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中的代码修改为：

Js代码  
<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）后跳转到目标页面。

3
顶

4
踩

分享到：

如何获得HR的青睐，面试常见的问题总结 | 网站开发人员应该学习点jQuery的6大理由

2012-08-09 08:52
浏览 4480
评论(6)
分类:Web前端
查看更多

6 楼 web001 2012-08-10

witcheryne 写道

我的3年前的文章
http://witcheryne.iteye.com/admin/blogs/319119

我访问不了这个地址，可能是你的管理地址吧，里面有admin，提供给我一个正确的地址，我把链接加上。

5 楼 witcheryne 2012-08-09

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>err.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
   
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
	<script src="scripts/jQuery/jquery.js" type="text/javascript"></script>
	<script language="javascript">
		$(document).ready(function() {
			function jump(count) {
				window.setTimeout(function(){
					count--;
					if(count > 0) {
						$('#num').attr('innerHTML', count);
						jump(count);
					} else {
						location.href="login.jsp";
					}
				}, 1000);
			}
			jump(3);
		});
	</script>
  </head>
  
  <body>
   	失败...<br />
   	3秒后自动跳转。当前还剩<span id="num">3</span>秒
  </body>
</html>

4 楼 witcheryne 2012-08-09

我的3年前的文章
http://witcheryne.iteye.com/admin/blogs/319119

3 楼 jinnianshilongnian 2012-08-09

web001 写道

jinnianshilongnian 写道

可以直接使用

<meta http-equiv="Refresh" content="5;url=http://sishuok.com">

表示5秒后跳转到私塾在线学习网

可能题目误解了，我想实现“5秒自动跳转，如果没有跳转，点击这里手动跳转”

哦呵呵，其实一样啊，如果不需要倒计时的形式可以用meta头Refresh代替

2 楼 web001 2012-08-09

jinnianshilongnian 写道

可以直接使用

<meta http-equiv="Refresh" content="5;url=http://sishuok.com">

表示5秒后跳转到私塾在线学习网

可能题目误解了，我想实现“5秒自动跳转，如果没有跳转，点击这里手动跳转”

1 楼 jinnianshilongnian 2012-08-09

可以直接使用

<meta http-equiv="Refresh" content="5;url=http://sishuok.com">

表示5秒后跳转到私塾在线学习网

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论