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

迷茫
Release: 2017-03-25 11:40:52
Original
28542 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 myself, 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地址
</span>
Copy after login

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

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

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!

source:php.cn
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
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!