jquery倒计时（仿团购）转至 http://justcoding.iteye.com/blog/2210962

2021-10-16 22:04:30

倒计时一般是用来表示未来某一时刻距现在时刻还剩多少时间。倒计时在WEB上应用非常广泛，如考试系统倒计时，团购网站中的优惠活动倒计时等等。今天，我们来使用jQuery实现一个简单的倒计时功能。

aaarticlea/png;base64,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" alt="" />

本文以团购网站的倒计时为背景，我们知道，网站会给每个优惠活动（商品）定一个结束时间，也就是到期时间，但系统时间到达了结束时间，就意味着活动结束。因此，我们在HTML中就要定义活动的结束时间。

<ul class="prolist">

     <li><img src="data:images/p1.jpg" />简约时尚皮带男士手表一款69元<p class="endtime showtime"

      value="1354365003"></p></li>

     <li><img src="data:images/p2.jpg" />高强度无毒树脂材料榨汁器24元<p class="endtime showtime"

      value="1350748800"></p></li>

     <li><img src="data:images/p3.jpg" />茶香番茄/乌梅/杨梅0.48元<p class="endtime showtime"

      value="1346487780"></p></li>

     <li><img src="data:images/p4.jpg" />沙滩鞋男士户外凉鞋69元<p class="endtime showtime"

      value="1367380800"></p></li>

</ul>

上述html代码中，我们建立了一个列表，用于展示活动名称、图片和倒计时，关键的是我们在每个活动定义了结束时间：.endtime属性 value的值，这个值是一串数字，表示自1970年1月1日以来的秒数，由后台（PHP）生成。比如结束时间2013-05-01 12:00可以通过PHP转换为1367380800秒，转换后的秒数可以用来接下来的jQuery计算倒计时。

CSS

我们需要给页面中的列表实际一个稍微好看点的外观。

.endtime{font-size:20px; font-family:"Microsoft Yahei"; color:#000}

.prolist{margin:10px auto}

.prolist li{float:left; width:320px; height:240px; margin:10px; font-size:14px;

position:relative}

.prolist li img{width:320px; height:198px;}

.showtime{position:absolute; top:174px; height:24px; line-height:24px;

background:#333; color:#fff; opacity:.6; display:none}

保存，预览页面效果，可以看到一个排列整齐的活动列表。

JQUERY

var serverTime =  * 1000; //服务器时间，毫秒数

$(function(){

    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; //拆分秒

        if(myD>= 0){

            var str = myD+"天"+myH+"小时"+myM+"分"+myS+"."+myMS+"秒";

        }else{

            var str = "已结束！";

        }

        obj.html(str);

      });

    }, 100); //每个0.1秒执行一次

});

我们首先获取服务器时间，我们要将倒计时与服务器时间保持一致，这样一来每个客户端看到的倒计时是一样的，我们通过计算客户端与服务器的时间偏移量，来避免了因客户机器时间与服务器时间不一致而引起的倒计时不同步的麻烦。当然这个服务器时间需要使用服务端语言来获取，本文使用了PHP的 time()函数获取的秒数，记得要乘以1000转换成毫秒数。

我们通过setInterval建立一个定时器，并且每个100毫秒执行一次setInterval里面的代码。

然后在定时器里，我们使用jQuery的each()方法，遍历页面中的列表，计算天、小时、分、秒。

因为javascript的getTime()函数获取的是毫秒数，所以计算过程中都要/1000，

我们并不想在一个页面将列表中所有的倒计时都显示出来，而需要用户将鼠标滑向列表中的图片才显示对应的倒计时，因此我们还需要加入以下辅助代码：

$(function(){

    $(".prolist li img").each(function(){

        var img = $(this);

        img.hover(function(){

            img.next().show();

        },function(){

            img.next().hide();

        });

    });

});

全代码：

<!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>

码农公寓

CSS

相关文章