H5页面添加倒计时,然后自动跳转

Posted 坠落凡尘的魔鬼

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了H5页面添加倒计时,然后自动跳转相关的知识,希望对你有一定的参考价值。

下面给出一个倒计时页面的代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>修改密码</title>
</head>
<body>
<div style="width: 400px; margin-left: auto; margin-right: auto; display: flex; flex-direction: row; text-align: center;margin-top: 200px;">
<div style="display: flex; flex-direction: column;">
<font style="margin-top: 10px">恭喜您!修改密码成功</font>
<font><font color="#166f97" id="f1">5s</font>后将跳转至登录页</font>
<a href="https://123.sogou.com/" style="text-decoration: none;margin-top: 5px;color: #166f97">【手动跳转】</a>

//这个链接写自己想要跳转到链接
</div>
</div>
</body>
<script type="text/javascript">

var i = 5;//定义倒计时的总时间为5s
var xx = window.setInterval(tt, 1000);
function tt(){
  i--;
  document.getElementById(‘f1‘).innerHTML = i + ‘s‘;
  if(i == 0){
  window.clearInterval(xx);
  window.location.href = "https://123.sogou.com/";

  //这个链接写自己想要跳转到链接

  }
}
</script>
</html>

注意:当修改完密码成功,会出现一个倒计时为5s的提示,

 当时间为0是会自动跳转到一个新的地址。而上面设置的地址是搜狐浏览器的

网页大全。

 

以上是关于H5页面添加倒计时,然后自动跳转的主要内容,如果未能解决你的问题,请参考以下文章

vue路由跳转不会自动跳转到顶部的问题

webview 嵌入 h5 页面互相通信

IH5手机上如何实现自动播放

小程序和H5页面的相互跳转

微信小程序:设置页面计时自动跳转

支付宝小程序如何跳转到淘宝h5页面