可以防止重新整理重置的倒數計時例項程式碼

antzone發表於2017-03-13

一般說來，除了我們明確設定一個到期時間日期，比如類似於2018-5-12這樣，一般在重新整理網頁的時候都會使倒數計時重新來過，下面就介紹一下可以防止這種情況的方式，希望能夠給需要的朋友帶來一定的幫助。

例項程式碼如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>window物件的name屬性-螞蟻部落</title>
</head>  
<body>  
<script type="text/javascript">  
var maxtime;  
if(window.name==''){   
  maxtime=7*60;  
}
else{  
  maxtime=window.name;  
}  
function CountDown(){  
  if(maxtime>=0){  
    minutes=Math.floor(maxtime/60);  
    seconds=Math.floor(maxtime%60);  
    msg="距離倒數計時結束還有:"+minutes+"分"+seconds+"秒";  
    document.all["timer"].innerHTML=msg;  
    if(maxtime==5*60){
      alert('距離結束還是有五分鐘'); 
    } 
    --maxtime;  
    window.name=maxtime;   
  }  
  else{  
    clearInterval(timer);  
    alert("倒數計時已經結束了");  
  }  
}  
timer=setInterval("CountDown()",1000);  
</script>  
<div id="timer"></div>   
</body>  
</html>

以上程式碼實現了我們的要求，儘管重新整理頁面也會被時倒數計時效果重置。之所以能夠實現這樣的效果，是因為window.name屬性值，在重新整理網頁的時候是不會改變的，甚至頁面載入了其他域名的頁面也不會改變。

相關文章