倒數計時指定時間之後實現頁面跳轉效果

admin發表於2017-03-20

通過倒數計時指定秒數之後實現網頁的跳轉效果，在很多效果中都有應用，例如，登陸或者註冊成功之後倒數計時指定時間跳轉到某個頁面，下面就通過程式碼例項介紹一下如何實現此效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style type="text/css"> 
#thediv{
  width:150px;
  height:30px;
  text-align:center;
  margin:0px auto;
  font-size:12px;
}
</style> 
<script type="text/javascript">  
window.onload=function(){
  var odiv=document.getElementById("thediv");
  var timer=null;
  function Countdown(count,obj){
    return function(){
      if(count>0){
        count=count-1;
        obj.innerHTML="剩餘"+count+"跳轉到指定網頁";
      }
      else{
        location.href="http://www.softwhy.com";
        clearInterval(timer);
      }
    }
  }
  timer=setInterval(Countdown(20,odiv),1000);
}
</script> 
</head> 
<body> 
<div id="thediv"></div>
</body> 
</html>

可以在倒數計時20秒之後實現跳轉效果，程式碼很簡單這裡就不介紹了，可以參閱相關閱讀。

相關閱讀:

1.innerHTML屬性可以參閱js innerHTML一章節。 

2.setInterval()函式可以參閱setInterval()一章節。 

3.clearInterval()函式可以參閱window.clearInterval()一章節。

相關文章