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是會自動跳轉到一個新的地址。而上面設置的地址是搜狐瀏覽器的

網頁大全。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM