阿萌的程序小屋

萌物控重度患者与您一起畅游技术与梦想的世界

JavaScript 实现Html页面倒计时效果的简单实例

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

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

如有朋友感觉我的博文或代码有问题,愿能给予我宝贵的意见!Thanks

另注:转载请随意,但请带上本文地址,万分感谢。

http://www.wangmengyu.cn/?p=441

这就是真的真的是传说中的公告牌的说~~
暂且努力发展中~~

性别:男  年龄:20岁
现居:江苏  南京  浦口区
标语:萌即是一切