欢迎您访问 最编程 本站为您分享编程语言代码,编程技术文章!
您现在的位置是: 首页

使用HTML实现页面自动刷新和跳转

最编程 2024-08-13 20:07:51
...

当我们在做网页时,有的时候想让网页自动不停刷新,或者过一段时间自动跳转到另外一个你自己设定的页面?其实实现这个效果不算难。一下代码给大家参考,互相学习。

1:页面自动刷新:把如下代码加入头部文件()中:

<meta http-equiv="refresh" content="5">

其中5指每隔5秒刷新一次页面.


2:页面自动跳转:把如下代码加入头部文件()中:

<meta http-equiv="refresh"content="5;url=http://www.w3school.com.cn/">

其中5指隔5秒后跳转到指定的:http://www.w3school.com.cn/页面。


3:页面自动刷新(JS代码):

<!DOCTYPE html>
<html>
<head>
<title>几秒后跳转.html</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

</head>

<body bgcolor="#33ccff">
	<script type="text/javascript">
		function delayURL(url) {
			var delay = document.getElementById("time").innerHTML;
			//最后的innerHTML不能丢,否则delay为一个对象  
			if (delay > 0) {
				delay--;
				document.getElementById("time").innerHTML = delay;
			} else {
				window.top.location.href = url;
			}
			setTimeout("delayURL('" + url + "')", 1000);
			//此处1000毫秒即每一秒跳转一次  
		}
	</script>
	
	<div style="text-align: center; margin-top: 200px;">
		<span id="time" style="background: red">5</span>秒钟之后自动跳转,如果不跳转,请点击下面链接
		<a href="./login.jsp">点击链接快速跳转</a>
	</div>
	
	<script type="text/javascript">
		delayURL("./login.jsp");
	</script>
</body>
</html>

注意:这里自己放个超链接就OK,我写的是登录页面。

效果如下图:

 

 

2019年9月25日更新:

添加“3:页面自动刷新(JS代码)”的测试地址:https://codepen.io/yansheng836/pen/dybrdyV

 

推荐阅读