您的位置:首頁> 實例代碼> JS實例

JavaScript 倒計時關閉頁面

2020-2-23 14:14| 作者: antzone| 查看: 1556| 評論: 0|來自: 螞蟻部落

很多網站在關閉網頁之前會給出一個倒計時效果,這樣可以讓瀏覽者做到根據相應的情況進行操作。

下面就通過實例代碼介紹一下如何實現此效果。

代碼實例如下:

[HTML] 純文本查看 復制代碼运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.kolabortv.com/" />
<title>螞蟻部落</title>
<style type="text/css">
#timer{
  width:200px;
  height:30px;
  background-color:green;
  text-align:center;
  line-height:30px;
  margin:0px auto;
}
</style>
<script type="text/javascript"> 
var otimer;
var second=10;
function timer(){
  otimer.innerHTML=second;
  if(second>0){
    second=second-1;
    return false;
  }
  window.close();
} 
window.onload=function(){
  otimer=document.getElementById("timer");
  setInterval(timer,1000);
}
</script>
</head>
<body>
  <div id="timer"></div>
</body>
</html>

以上代碼實現了我們想要的功能,可以倒計時10秒之后關閉頁面。

原理非常的簡單,利用定時器setInterval()方法,不斷調用timer()函數,每調用一次秒數減一,直到秒數變為零就執行window.close(),將頁面關閉。同時每次調用函數都會將當前的剩余秒數寫入div中,于是實現了倒計時效果。

相關閱讀:

(1).innerHTML屬性參閱JavaScript innerHTML一章節。 

(2).setInterval()方法參閱JavaScript setInterval()一章節。 


鮮花

握手

雷人

路過

雞蛋

最新評論

返回頂部
亚洲骑兵 - 东方AV在线,我想看美女下面的毛,大香蕉一本道久在线 <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <文本链> <文本链> <文本链> <文本链> <文本链> <文本链>