jquery 倒计时

倒计时在WEB上应用非常广泛,如考试系统倒计时,团购网站中的优惠活动倒计时等等。今天,我们来使用jQuery实现一个简单的倒计时功能。

html代码:

<div class="box3 " data-endtime="<?php echo strtotime('2015-12-1');?>" ></div>
<div class="box3 " data-endtime="1448928000"></div>

js代码

<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>

<script type="text/javascript">
var serverTime = <?php echo time();?> * 1000;
$(function(){
    var dateTime = new Date();
    var difference = dateTime.getTime() - serverTime;
    
    setInterval(function(){
      $("[data-endtime]").each(function(){
        var obj = $(this);
        var endTime = new Date(parseInt(obj.data('endtime')) * 1000);
        var nowTime = new Date();
        var nMS=endTime.getTime() - nowTime.getTime() + difference;
        var myD=Math.floor(nMS/(1000 * 60 * 60 * 24));
        var myH=Math.floor(nMS/(1000*60*60)) % 24;
        var myM=Math.floor(nMS/(1000*60)) % 60;
        var myS=Math.floor(nMS/1000) % 60;
        var myMS=Math.floor(nMS/100) % 10;
        if(myD>= 0){
            var str = "开班倒计时:"+myD+"天"+myH+"小时"+myM+"分"+myS+"."+myMS+"秒";
        }else{
            var str = "已结束!";    
        }
        obj.html(str);
      });
    }, 100);
});
</script>

发表评论

邮箱地址不会被公开。 必填项已用*标注