JavaScript realizes automatic jump after x seconds

2012/08/09 09:00
Number of readings 329

Today, I learned a new technology when watching video learning, that is, when we click "Submit" or "Confirm" on a page, we will automatically jump to a page.

After searching on the Internet, I found that there are many ways to deal with this technology. I only record three ways I learned in the video:

1. Use a response. sendRedirect ("target page. jsp . Htm"); Realize direct jump;

2. Sometimes we need a hint, such as "Automatically jump after x seconds, if there is no jump, please click here", then you can call the Delay Go To URL in Snippets in myeclipse, and the following code will be automatically generated:

 

  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>   

 

Change this code to:

 

  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. Automatically jump after seconds. If you don't want to jump, please click the link below
  8. <a href= Target Page. jsp >Destination Page</a>
  9. <script type= "text/javascript" >  
  10. delayURL( " http://www.hualai.net.cn " , 3000);   
  11. </script>   

 

Then you will jump directly to the "target page" after 3 seconds. This method is to set the jump after a few seconds, and the page will not change during this process. For example, set the time to 3 seconds, and then change 3 to 2, then change to 1, and finally jump. See the third method below.

 

3. Modify the code in method 2 to:

 

  1. <script language= "JavaScript1.2"  type= "text/javascript" >  
  2. function  delayURL(url) {  
  3.     var  delay=document.getElementById( "time" ).innerHTML;   
  4.     //The last innerHTML cannot be lost, otherwise delay is an object   
  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. //Here, 1000 milliseconds means a jump every second   
  13. }  
  14. </script>  
  15. <span id= "time"  style= "background: red" >3</span>  
  16. Automatically jump after seconds. If you don't want to jump, please click the link below
  17. <a href= Target Page. jsp >Topic list</a>
  18. <script type= "text/javascript" >  
  19. delayURL( " http://www.hualai.net.cn/news/knowledge/265.html " );   
  20. </script>   

 

The effect of this method is to jump to this page after clicking Submit on the previous page, and then jump to the target page after 3 seconds (this 3 will decrease to 0).

Expand to read the full text
Loading
Click to lead the topic 📣 Post and join the discussion 🔥
Reward
zero comment
zero Collection
zero fabulous
 Back to top
Top