Home >Web Front-end >HTML Tutorial >Detailed explanation of three common methods for HTML pages to automatically jump after 3 seconds

Detailed explanation of three common methods for HTML pages to automatically jump after 3 seconds

迷茫
迷茫Original
2017-03-25 11:40:5228562browse

In practice, we often encounter a problem: how to automatically jump to the page after N seconds?
I encountered problems and searched for information myself, 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地址
</span>

Method 2:

You need to use the method in window:

setTimeout calculates an expression after the specified millisecond value.

Example:

window.setTimeout("alert(&#39;Hello, world&#39;)", 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. To realize the countdown 3-2-1;

The settimeout method can no longer be done;

setInterval evaluates an expression after every specified millisecond value.

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

<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 Detailed explanation of three common methods for HTML pages to automatically jump after 3 seconds. For more information, please follow other related articles on the PHP Chinese website!

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