3 ways to make HTML pages automatically jump after 3 seconds

In projects, we often encounter such a function: how to realize the page to automatically jump after N seconds. In fact, the method is very simple. In this article, the editor will share with you three common methods of automatically jumping an HTML page after 3 seconds. Friends who are interested in the knowledge about how an HTML page automatically jumps after 3 seconds can learn together.

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

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

Method 1:

The simplest one: directly in front Add code inside:

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;">//3秒之后自动跳转到res.html

Both 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———— —(Data written in the address bar of the browser, such as: http://localhost:8080/TestDemo /1.jsp)

Method 2:
You need to use the method in window:

setTimeout calculates an expression after the specified millisecond value.

Example:

The code is as follows:

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

This is written in js code;

The specific implementation is as follows:

Code As follows:

<script type="text/javascript">
onload=function(){ <span style="white-space:pre"> </span>//在进入网页的时候加载该方法
setTimeout(go, 3000); <span style="white-space:pre"> </span> /*在js中是ms的单位*/
};
function go(){
location.href="http://localhost:8080/TestDemo/index.jsp";
}
</script>
//3秒之后自动执行go方法，直接跳转到index.jsp页面

Method 3:
The flaw of the above two examples is that they can realize the jump, but they don’t know when to jump. Realize the countdown 3-2-1;

The settimeout method can no longer be used;

setInterval calculates an expression after each specified millisecond value.

After the same time, the corresponding function will be executed. Specific implementation method:

The code is as follows:

<script type="text/javascript">
onload=function(){
setInterval(go, 1000);
};
var x=3; //利用了全局变量来执行
function go(){
x--;
if(x>0){
document.getElementById("sp").innerHTML=x; //每次设置的x的值都不一样了。
}else{
location.href=&#39;res.html&#39;;
}
}
</script>

The above is the detailed content of 3 ways to make HTML pages automatically jump after 3 seconds. For more information, please follow other related articles on the PHP Chinese website!