Html网页倒计时是Web开发中比较常用的功能之一，例如新站上线前的欢迎页，节日的到来，活动的计时等等，阿萌来简单介绍一个比较简单的倒计时实例。

原理嘛，很简单，就是利用设定的时间戳减去当前的时间戳，再一次换算成所需要的相应的天、小时、分钟、秒等数值，然后输出即可。

下面来看代码：

<div id="countDown"> 
    <span id="t_d">00天</span> 
    <span id="t_h">00时</span> 
    <span id="t_m">00分</span> 
    <span id="t_s">00秒</span>
</div> 
<script type="text/javascript">
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);
</script> 

为了人性化和脚本的优化，我们需要在倒计时为0后，覆盖输出“倒计时结束” 等字样，并且清除相应的setInterval定时器。

至于为什么时间结果不一次性输出，这个咩，看个人吧，其实也可以先用字符串将时间的格式存储好，再一次性输出到一个元素里。我们分开来好写主要是为了方便定义CSS样式咩。

至于效果展示阿萌就不展示了，大家可以复制代码自己尝试下。