[转帖]JavaScript实现x秒后自动跳转_Android, Python及开发编程讨论区_Weblogic技术|Tuxedo技术|中间件技术|Oracle论坛|JAVA论坛|Linux/Unix技术|hadoop论坛_联动北方技术论坛  
网站首页 | 关于我们 | 服务中心 | 经验交流 | 公司荣誉 | 成功案例 | 合作伙伴 | 联系我们 |
联动北方-国内领先的云技术服务提供商
»  游客             当前位置:  论坛首页 »  自由讨论区 »  Android, Python及开发编程讨论区 »
总帖数
1
每页帖数
101/1页1
返回列表
0
发起投票  发起投票 发新帖子
查看: 3526 | 回复: 0   主题: [转帖]JavaScript实现x秒后自动跳转        下一篇 
css
注册用户
等级:上尉
经验:516
发帖:38
精华:0
注册:2013-1-11
状态:离线
发送短消息息给css 加好友    发送短消息息给css 发消息
发表于: IP:您无权察看 2013-1-15 14:36:10 | [全部帖] [楼主帖] 楼主

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

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

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

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

Js代码
北京联动北方科技有限公司北京联动北方科技有限公司北京联动北方科技有限公司

  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. </script> 
  8. <!-- Place this in the 'body' section --> 
  9. <a href="javascript:" onClick="delayURL('myPage.html','2000')">My Delayed Link</a> 


<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代码
北京联动北方科技有限公司北京联动北方科技有限公司北京联动北方科技有限公司

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


<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代码
北京联动北方科技有限公司北京联动北方科技有限公司北京联动北方科技有限公司

  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. setTimeout("delayURL('" + url + "')", 1000); 
  11. //此处1000毫秒即每一秒跳转一次 
  12. </script> 
  13. <span id="time" style="background: red">3</span> 
  14. 秒钟之后自动跳转,如果不跳转,请点击下面链接 
  15. <a href="目标页面.jsp">主题列表</a> 
  16. <script type="text/javascript"> 
  17. delayURL("http://www.hualai.net.cn/news/knowledge/265.html"); 
  18. </script> 


<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)    操作        顶端 
总帖数
1
每页帖数
101/1页1
返回列表
发新帖子
请输入验证码: 点击刷新验证码
您需要登录后才可以回帖 登录 | 注册
技术讨论