网页定时跳转-优快云博客

本文链接：https://blog.youkuaiyun.com/zl202111/article/details/128223698

网页自动跳转

实现网页定时自动跳转

实现网页定时自动跳转

效果：
在这里插入图片描述

10秒后自动跳转到网易云音乐的页面

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.box{
				width: 420px;
				height: 150px;
				border: darkgray solid 15px;
				margin: 0 auto;
				padding-top: 20px;
				text-align: center;
				vertical-align: middle;
			}
			.link_box{
				margin-top: 25px;
				padding-left: 20px ;
				display: flex;
			}
			.times{
				padding-right: 10px;
				float: left;
				color: red;
				font-size: 24px
			}
			a{
				text-decoration: ;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<h2>提交成功</h2><p>
			<div class='link_box'>
				<a href="https://music.163.com/" class="link" onclick="jump()">
				<div class='times'>10</div>
				<div style="float: left; padding-top: 7px;">秒后系统会自动跳转，也可单机此链接跳转</div>
				</a>
			</div>
		</div>
		<script type="text/javascript">
			let times = document.querySelector('.times');
			let link = document.querySelector('.link');
			let timer = null;
			let t = 10
			// console.log(times.innerHTML)
			timer = setInterval(function(){
				times.innerHTML -= 1;
				if(times.innerHTML<=0){
					console.log(link.href)
					location.replace(link.href)
					clearTimeout(timer)
				}
			},1000) 
		</script>
	</body>
</html>