Html網頁倒計時是Web開發中比較常用的功能之一，例如新站上線前的歡迎頁，節日的到來，活動的計時等等，阿萌來簡單介紹一個比較簡單的倒計時實例。

原理嘛，很簡單，就是利用設定的時間戳減去當前的時間戳，再一次換算成所需要的相應的天、小時、分鐘、秒等數值，然后輸出即可。

下面來看代碼：

00天

00時

00分

00秒

function countDown(){

var eTime= new Date('2015/6/24 16:26:00'); //截止時間

var nTime = new Date();

var t =eTime.getTime() – nTime.getTime();

var d=Math.floor(t/1000/60/60/24);

var h=Math.floor(t/1000/60/60%24);

var m=Math.floor(t/1000/60%60);

var s=Math.floor(t/1000%60);

document.getElementById("t_d").innerHTML = d + "天";

document.getElementById("t_h").innerHTML = h + "時";

document.getElementById("t_m").innerHTML = m + "分";

document.getElementById("t_s").innerHTML = s + "秒";

if(t<0){document.getElementById('countDown').innerHTML='倒計時結束！';clearInterval(countD);};

}

var countD = setInterval(countDown,1000);

為了人性化和腳本的優化，我們需要在倒計時為0后，覆蓋輸出“倒計時結束” 等字樣，并且清除相應的setInterval定時器。

至于為什么時間結果不一次性輸出，這個咩，看個人吧，其實也可以先用字符串將時間的格式存儲好，再一次性輸出到一個元素里。我們分開來好寫主要是為了方便定義CSS樣式咩。

至于效果展示阿萌就不展示了，大家可以復制代碼自己嘗試下。

總結

以上是生活随笔為你收集整理的桌面html倒计时如何添加,JavaScript 实现Html页面倒计时效果的简单实例的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。