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

高洛峰
高洛峰Original
2018-05-18 15:03:129445browse

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 93f0f5c25f18dab9d176bd4f6de5d30e:

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

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

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>

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

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