Home Web Front-end JS Tutorial JavaScript implements automatic jump to a page after x seconds_javascript skills

JavaScript implements automatic jump to a page after x seconds_javascript skills

May 16, 2016 pm 05:44 PM
Jump Page jump

I learned a new technology while watching a video today, that is, when we click "Submit" or "Confirm" on a page, it will automatically jump to a page.
After searching on the Internet, there are many ways to deal with this technology. I only wrote down the three methods I learned in the video:
1. Use a response.sendRedirect("target page.jsp.htm "); to achieve direct jump;
2. Sometimes we need some prompts, such as "It will jump automatically after x seconds. If there is no jump, please click here", you can call Delay Go in Snippets in myeclipse To URL. The following code will be automatically generated:

Copy code The code is as follows:

<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>

Modify this code to:
Copy the code The code is as follows:

<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>
seconds later Automatically jump, if not, please click the link below
<a href="target page.jsp">target page</a>
<script type="text/javascript"&gt ;
delayURL("http://www.hualai.net.cn", 3000);
</script>

Then it will jump directly after 3 seconds Go to the "Target Page". This method is to set a few seconds to jump and the page will not change during this process. For example, set it to 3 seconds, and then as time changes, 3 turns to 2 and then to 1 until it jumps. Please follow Look at the third method.
3. Modify the code in method 2 to:
Copy the code The code is as follows:

<script language="JavaScript1.2" type="text/javascript">
function delayURL(url) {
var delay=document.getElementById("time").innerHTML;
//The last innerHTML cannot be lost, otherwise delay is an object
if(delay>0){
delay--;
document.getElementById("time").innerHTML=delay;
} else{
window.top.location.href=url;
}
setTimeout("delayURL('" url "')", 1000);
//1000 milliseconds here is every Jump once per second
}
</script>
<span id="time" style="background: red">3</span>
Automatically jump after seconds , if it does not jump, please click the link below
<a href="target page.jsp">topic list</a>
<script type="text/javascript">
delayURL("http://www.hualai.net.cn/news/knowledge/265.html");
</script>

The effect achieved by this method is After clicking submit on the previous page, you will jump to this page. After 3 seconds (this 3 will decrease to 0), you will jump to the target page.
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot Article Tags

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Detailed explanation of PHP page jump function: page jump skills of header, location, redirect and other functions Detailed explanation of PHP page jump function: page jump skills of header, location, redirect and other functions Nov 18, 2023 pm 05:08 PM

Detailed explanation of PHP page jump function: page jump skills of header, location, redirect and other functions

How to implement page jump after PHP form submission How to implement page jump after PHP form submission Aug 12, 2023 am 11:30 AM

How to implement page jump after PHP form submission

How to log in and jump to pass value in php How to log in and jump to pass value in php Jun 05, 2023 am 10:44 AM

How to log in and jump to pass value in php

How to implement page jump in 3 seconds: PHP Programming Guide How to implement page jump in 3 seconds: PHP Programming Guide Mar 25, 2024 am 10:42 AM

How to implement page jump in 3 seconds: PHP Programming Guide

How to implement PHP code to jump to a specified page How to implement PHP code to jump to a specified page Mar 07, 2024 pm 02:18 PM

How to implement PHP code to jump to a specified page

PHP programming skills: How to jump to the web page within 3 seconds PHP programming skills: How to jump to the web page within 3 seconds Mar 24, 2024 am 09:18 AM

PHP programming skills: How to jump to the web page within 3 seconds

How to close jump shopping app How to close jump shopping app Nov 29, 2023 pm 05:30 PM

How to close jump shopping app

Use uniapp to achieve page jump animation effect Use uniapp to achieve page jump animation effect Nov 21, 2023 pm 02:15 PM

Use uniapp to achieve page jump animation effect

See all articles