Home > Web Front-end > HTML Tutorial > Three common ways to automatically jump to an HTML page after 3 seconds

Three common ways to automatically jump to an HTML page after 3 seconds

高洛峰
Release: 2018-05-18 15:03:12
Original
9482 people have browsed it

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: add code directly in the front :

<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,两个属于同一文件下面,要是需要跳转到jsp页面,就需要在url里面填写url地址————(浏览器的地址栏里面写入的数据,如:http://localhost:8080/TestDemo/1.jsp)</span>
Copy after login

Method 2:
You need to use the method in window:
setTimeout calculates an expression after specifying the millisecond value.
Example:

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

This is written in js code;
The specific implementation is 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页面
Copy after login

Method 3:
The flaw of the above two examples is that they can realize the jump, but they don’t know when to jump. Implement the countdown 3-2-1;
settimeout The method can no longer be used;
setInterval calculates an expression after each specified millisecond value.
If the same time has not passed, the corresponding function will be executed. Specific implementation methods:

<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>
Copy after login

For more three common methods of automatically jumping HTML pages after 3 seconds, please pay attention to the PHP Chinese website for related articles!

Related labels:
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template