Three common methods for HTML pages to automatically jump after 3 seconds

Three common methods for HTML pages to automatically jump after 3 seconds

In practice, we often encounter a problem: how to make the page jump automatically after N seconds?

I encountered problems and searched for information myself, and summarized 3 methods

Method 1:

The simplest one: add the code directly in the front <head>:


Copy code
The code is as follows:

<span style="font-size:18px;"> </span><span style="font-size:24px;"><meta http-equiv="refresh" content="3;URL=res.html"> </span>
<span style="font-size:24px;">//Automatically jump to res.html after 3 seconds. The two belong to the same file. If you need to jump to the jsp page, you need to fill in the url address in the url (the data written in the address bar of the browser, such as: http://localhost:8080/TestDemo/1.jsp)</span>

Method 2:

Need to use the method in window:

setTimeout evaluates an expression after a specified number of milliseconds.

example:


Copy code
The code is as follows:

window.setTimeout("alert('Hello, world')", 1000);

This is written in the js code;

The specific implementation is as follows:


Copy code
The code is as follows:

<script type="text/javascript">
onload=function(){ <span style="white-space:pre"> </span>//Load this method when entering the web page
setTimeout(go, 3000); <span style="white-space:pre"> </span> /*The unit in js is ms*/
};
function go(){
location.href="http://localhost:8080/TestDemo/index.jsp";
}
</script>
//Automatically execute the go method after 3 seconds and jump directly to the index.jsp page

Method 3:

The flaw of the above two examples is that they can jump, but we don't know when to jump. Implement the countdown 3-2-1;

The settimeout method can no longer do this;

setInterval evaluates an expression every specified number of milliseconds.

When the same amount of time passes, the corresponding function will be executed. Specific implementation method:


Copy code
The code is as follows:

<script type="text/javascript">
onload = function() {
setInterval(go, 1000);
};
var x=3; //Using global variables to execute
function go(){
x--;
if(x>0){
document.getElementById("sp").innerHTML=x; //The value of x is different each time.
}else{
location.href='res.html';
}
}
</script>

The above content is the three common methods shared in this article about HTML pages automatically jumping after 3 seconds. I hope you like it.

<<:  Web page CSS priority is explained in detail for you

>>:  Docker installation and configuration steps for MySQL

Recommend

WeChat applet implements simple calculator function

WeChat applet: Simple calculator, for your refere...

MySQL online log library migration example

Let me tell you about a recent case. A game log l...

Detailed explanation of component development of Vue drop-down menu

This article example shares the specific code for...

Management of xinetd-based services installed with RPM packages in Linux

Table of contents Preface 1. Startup management b...

Practical record of handling MySQL automatic shutdown problems

I recently helped someone with a project and the ...

User experience analysis of facebook dating website design

<br />Related article: Analysis of Facebook&...

Detailed steps to build a file server in Windows Server 2012

The file server is one of the most commonly used ...

How to use MySQL stress testing tools

1. MySQL's own stress testing tool - Mysqlsla...

react-beautiful-dnd implements component drag and drop function

Table of contents 1. Installation 2.APi 3. react-...

Implementation of Docker cross-host network (overlay)

1. Docker cross-host communication Docker cross-h...

Linux hardware configuration command example

Hardware View Commands system # uname -a # View k...

How to restore data using binlog in mysql5.7

Step 1: Ensure that MySQL has binlog enabled show...

Introduction to the usage of common XHTML tags

There are many tags in XHTML, but only a few are ...

Linux uses iftop to monitor network card traffic in real time

Linux uses iftop to monitor the traffic of the ne...