Home > Web Front-end > HTML Tutorial > How to realize automatic jump in HTML page after 3 seconds

How to realize automatic jump in HTML page after 3 seconds

醉折花枝作酒筹
Release: 2021-04-26 11:26:47
forward
37599 people have browsed it

This article will introduce to you how to automatically jump to HTML pages after 3 seconds. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

How to realize automatic jump in HTML page after 3 seconds

Method 1:

The simplest one: add code directly in the front :

<meta http-equiv="refresh" content="3;URL=res.html">
//3秒之后自动跳转到res.html,两个属于同一文件下面,要是需要跳转到jsp页面,就需要在url里面填写url地址————(浏览器的地址栏里面写入的数据,如:http://localhost:8080/TestDemo/1.jsp)
Copy after login

Method 2:

Need to use the method in window:

setTimeoutpass Evaluates an expression after specifying a value in milliseconds.

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

Automatically execute the go method after 3 seconds and jump directly to the index.jsp page

Method 3:

The flaw of the above two examples is that the jump can be achieved, but I don’t know when to jump. Implement the countdown 3-2-1;

settimeout method can no longer be done;

setIntervalEvaluate an expression after every specified millisecond value.

Before the same time passes, 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

Recommended learning: html video tutorial

The above is the detailed content of How to realize automatic jump in HTML page after 3 seconds. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:csdn.net
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