jQuery倒计时(仿团购)

#   jQuery倒计时(仿团购)



毫秒版 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
    <html xmlns="http://www.w3.org/1999/xhtml">  
    <head>  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
    <title>jQuery倒计时</title>  
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>  
    <script type="text/javascript">  
    var serverTime = <?php echo time();?> * 1000;  
    $(function()  
    {  
        var str      = '';  
        var dateTime = new Date();  
        var difference = dateTime.getTime() - serverTime;  
          
        setInterval(function()  
        {  
            $(".endtime").each(function()  
            {  
                var obj = $(this);  
                var endTime = new Date(parseInt(obj.attr('value')) * 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;  
                str = myD>= 0 ? myD+"天"+myH+"小时"+myM+"分"+myS+"."+myMS+"秒" : "已结束!";   
                  
                obj.html(str);  
            });  
        }, 100);  
    });  
    </script>  
    </head>  
      
    <body>  
        <p>距离2015年05月18日还有</p>  
        <div class="endtime" value="<?php echo strtotime('2015-05-18 00:00:00') ?>"></div>  
        <p>距离2015年05月19日还有</p>  
        <div class="endtime" value="<?php echo strtotime('2015-05-19 12:36:00') ?>"></div>  
    </body>  
    </html>  




-------------------------------------------------------------
无毫秒版

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
    <html xmlns="http://www.w3.org/1999/xhtml">  
    <head>  
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
    <title>倒计时</title>  
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>  
    <script>  
        $(function(){ updateEndTime(); });  
          
        //倒计时函数  
        function updateEndTime()  
        {  
            var date = new Date();  
            var time = date.getTime();  //当前时间距1970年1月1日之间的毫秒数  
           
            $(".settime").each(function(i){  
           
            var endDate =this.getAttribute("endTime"); //结束时间字符串  
            //转换为时间日期类型  
            var endDate1 = eval('new Date(' + endDate.replace(/\d+(?=-[^-]+$)/, function (a) { return parseInt(a, 10) - 1; }).match(/\d+/g) + ')');  
          
            var endTime = endDate1.getTime(); //结束时间毫秒数  
           
            var lag = (endTime - time) / 1000; //当前时间和结束时间之间的秒数  
            if(lag > 0)  
            {  
                var second = Math.floor(lag % 60);      
                var minite = Math.floor((lag / 60) % 60);  
                var hour = Math.floor((lag / 3600) % 24);  
                var day = Math.floor((lag / 3600) / 24);  
                $(this).html(day+"天"+hour+"小时"+minite+"分"+second+"秒");  
            }  
            else $(this).html("团购已经结束啦!");  
         });  
           
         setTimeout("updateEndTime()",1000);  
        }  
    </script>  
    </head>  
      
    <body>  
        <div class="settime" endTime="2015-5-12 12:1:1"></div>  
        <div class="settime" endTime="2015-6-13 12:8:1"></div>  
        <div class="settime" endTime="2013-5-12 12:1:1"></div>  
    </body>  
    </html>  


# xiaoxiao [ 2018-04-23 ]

# Address in this article

# http://www.s7smile.com/javascript/14

# s7smile.com