网页自动跳转
- 实现网页定时自动跳转
实现网页定时自动跳转
效果：
- 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>
![[附源码]Python计算机毕业设计SSM基于自组网的空地一体化信息系统（程序+LW)](https://img-blog.csdnimg.cn/6100a11d381b477d8b3a6a9cefbe6cef.png)
![[附源码]Python计算机毕业设计SSM计算机软考系统的设计与实现（程序+LW)](https://img-blog.csdnimg.cn/aa760a4acee94c688f778cc040ce09b8.png)
![[附源码]计算机毕业设计咖啡销售平台Springboot程序](https://img-blog.csdnimg.cn/6604eda9d52f4e65b2d0d1a2e06e8faf.png)
![[设计] Doris血缘解析流程](https://img-blog.csdnimg.cn/img_convert/14fc56c6f4cc35fa4d813245f8a658b4.png)