桌面html倒计时如何添加,JavaScript 实现Html页面倒计时效果的简单实例

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样式咩。

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