zoukankan      html  css  js  c++  java
  • JavaScript实现x秒后自动跳转

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

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

    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)后跳转到目标页面。

  • 相关阅读:
    MySQL主从复制
    高可用系列之Nginx
    02.PHP7.x编译详解
    01.PHP5.x编译详解
    月薪2500到年薪20+我经历了些什么?
    更换gitlab公网IP,引发的故障。
    博客资料汇总
    Nginx编译参数
    Zabbix3.0部署最佳实践
    SharePoint 2013让页面显示错误
  • 原文地址:https://www.cnblogs.com/lanzhi/p/6468444.html
Copyright © 2011-2022 走看看