JavaScript实现x秒后自动跳转

2012/08/09 09:00
阅读数 692

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

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

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

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

 

  1. <script language="JavaScript1.2" type="text/javascript">  
  2. <!--  
  3. //  Place this in the 'head' section of your page.    
  4. function delayURL(url, time) {  
  5.     setTimeout("top.location.href='" + url + "'", time);  
  6. }  
  7. //-->  
  8. </script>  
  9.   
  10. <!-- Place this in the 'body' section -->  
  11. <a href="javascript:" onClick="delayURL('myPage.html','2000')">My Delayed Link</a>   

 

将此代码修改为:

 

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

 

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

 

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

 

  1. <script language="JavaScript1.2" type="text/javascript">  
  2. function delayURL(url) {  
  3.    var delay=document.getElementById("time").innerHTML;  
  4.    //最后的innerHTML不能丢,否则delay为一个对象  
  5.    if(delay>0){  
  6.    delay--;  
  7.    document.getElementById("time").innerHTML=delay;  
  8.    }else{  
  9.    window.top.location.href=url;  
  10.    }  
  11. setTimeout("delayURL('" + url + "')", 1000);  
  12. //此处1000毫秒即每一秒跳转一次  
  13. }  
  14. </script>  
  15. <span id="time" style="background: red">3</span>  
  16. 秒钟之后自动跳转,如果不跳转,请点击下面链接  
  17. <a href="目标页面.jsp">主题列表</a>  
  18. <script type="text/javascript">  
  19. delayURL("http://www.hualai.net.cn/news/knowledge/265.html");  
  20. </script>   

 

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

展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
0 评论
0 收藏
0
分享
返回顶部
顶部