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

Set an icon for the website to be displayed on the far left of the browser tab

What is the purpose of this sentence? Copy code Th...

Complete steps to install mysql5.7 on Mac (with pictures and text)

I recently used a Mac system and was preparing to...

HTML sample code for implementing tab switching

Tab switching is also a common technology in proj...

In-depth understanding of the use of Vue

Table of contents Understand the core concept of ...

Detailed description of mysql replace into usage

The replace statement is generally similar to ins...

In-depth analysis of MySQL database transactions and locks

Table of contents 1. Basic Concepts ACID 3.AutoCo...

How to use MySQL common functions to process JSON

Official documentation: JSON Functions Name Descr...

HTML+CSS+JS sample code to imitate the brightness adjustment effect of win10

HTML+CSS+JS imitates win10 brightness adjustment ...

JavaScript to dynamically load and delete tables

This article shares the specific code of JavaScri...

Writing and understanding of arrow functions and this in JS

Table of contents Preface 1. How to write functio...

An Uncommon Error and Solution for SQL Server Full Backup

1. Error details Once when manually performing a ...

Detailed explanation of fs module and Path module methods in Node.js

Overview: The filesystem module is a simple wrapp...

Detailed tutorial for downloading and installing mysql8.0.21

Official website address: https://www.mysql.com/ ...