Html網(wǎng)頁倒計(jì)時(shí)是Web開發(fā)中比較常用的功能之一，例如新站上線前的歡迎頁，節(jié)日的到來，活動的計(jì)時(shí)等等，阿萌來簡單介紹一個(gè)比較簡單的倒計(jì)時(shí)實(shí)例。

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

下面來看代碼：

00天

00時(shí)

00分

00秒

function countDown(){

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

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 + "時(shí)";

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

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

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

}

var countD = setInterval(countDown,1000);

為了人性化和腳本的優(yōu)化，我們需要在倒計(jì)時(shí)為0后，覆蓋輸出“倒計(jì)時(shí)結(jié)束” 等字樣，并且清除相應(yīng)的setInterval定時(shí)器。

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

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。