制作jQuery倒数计时器

今天，我们将构建一个精巧的jQuery插件来显示倒数计时器。它将显示事件的剩余天数，小时数，分钟数和秒数，以及每秒的动态更新。注意：该插件在Github上也可用。

让我们从标记开始！

HTML

我们将为插件赋予广告名称“ countdown”。调用一个空元素，它将用倒数计时器所需的HTML填充该元素。除了选择要在其中显示元素的元素外，您无需执行任何其他操作。

生成的标记

<div id = “ countdown”  class = “ countdownHolder” >
    <span class = “ countDays” >
        <span class = “ position” >
            <span class = “数字静态” > </ span>
        </ span>
        <span class = “ position” >
            <span class = “数字静态” > </ span>
        </ span>
    </ span>

    <span class = “ countDiv countDiv0” > </ span>

    <span class = “ countHours” >
        <span class = “ position” >
            <span class = “数字静态” > </ span>
        </ span>
        <span class = “ position” >
            <span class = “数字静态” > </ span>
        </ span>
    </ span>

    <span class = “ countDiv countDiv1” > </ span>

    <span class = “ countMinutes” >
        <span class = “ position” >
            <span class = “数字静态” > </ span>
        </ span>
        <span class = “ position” >
            <span class = “数字静态” > </ span>
        </ span>
    </ span>

    <span class = “ countDiv countDiv2” > </ span>

    <span class = “ countSeconds” >
        <span class = “ position” >
            <span class = “数字静态” > </ span>
        </ span>
        <span class = “ position” >
            <span class = “数字静态” > </ span>
        </ span>
    </ span>

    <span class = “ countDiv countDiv3” > </ span>
</ div>

在上面的示例中，该插件最初是在id为countdown的div上调用的。然后，该插件为其添加了一个countdownHolder类（因此，一些样式通过CSS应用于该元素）。

里面是数字的标记。每个时间单位（天，小时，分钟和秒）有两个数字范围，这意味着您可以倒数未来不超过99天的日期（对于这样的时间范围，您可能不应该使用计时器，那会令人沮丧。

数字的静态类为它们提供了渐变背景和矩形阴影。设置动画后，将删除此类，以使这些CSS3触摸不会减慢动画的速度。将数字分组在一起，以便您轻松设置样式。在中添加一个font-size声明。countDays，将影响两天数字的大小。

该.countDiv跨度单元之间的分隔。冒号由：before /：after元素组成。

但是，该标记是如何精确生成的呢？

jQuery

首先，让我们编写插件使用的两个帮助器函数：

• init生成您在上面看到的标记；
• switchDigit取一个.position范围，并对其中的数字进行动画处理；

将此功能提取为单独的功能可以使我们保持插件代码的清洁。

资产/倒计时/jquery.countdown.js

  函数 初始化（elem，options） {
        elem.addClass（'countdownHolder'）;

        //在容器
        $ .each（[ 'Days'，'Hours'，'Minutes'，'Seconds' ]中创建标记，函数（i） {
            $（'<span class =“ count' + this + '”>'）.html（
                 '<span class =“ position”> \
                    <span class =“ digit static”> 0 </ span> \
                </ span> \
                <span class =“ position”> \
                    <span class =“ digit static”> 0 </ span> \
                </ span>”
            ）.appendTo（elem）;

            if（this！= “ Seconds”）{
                elem.append（'<span class =“ countDiv countDiv' + i + '”> </ span>'）;
            }
        }）;

    }

    //在两个数字之间创建动画过渡
    函数 switchDigit（position，number） {

        var digit = position.find（'.digit'）

        如果（digit.is（'：animated'））{
            返回 false ;
        }

        if（position.data（'digit'）==数字）{
             //我们已经在显示此数字
            return  false ;
        }

        position.data（'digit'，数字）;

        var replacement = $（'<div>'，{
             'class'：'digit'，
             CSS：{
                 top：'-2.1em'，
                不透明度：0
            }，
            html：number
        }）;

        //动画
        完成时将添加.static类。这使其运行更流畅。

        数字
            .before（替换）
            .removeClass（'静态'）
            .animate（{ top：'2.5em'，opacity：0 }，'fast'，function（） {
                digit.remove（）;
            }）

        替代品
            .delay（100）
            .animate（{ top：0，opacity：1 }，'fast'，function（） {
                replace.addClass（'static'）;
            }）;
    }

伟大的！现在让我们继续插件主体。我们的插件必须使用带有参数的对象，以实现更好的可配置性-我们正在计算的时间段的时间戳，以及在每个刻度上执行并经过剩余时间的回调函数。为简便起见，我从代码中省略了上面的功能。

资产/倒计时/jquery.countdown.js

（函数（$） {

    //每个时分
    var days中的秒数= 24 * 60 * 60，
        小时= 60 * 60，
        分钟= 60 ;

    //创建插件
    $ .fn.countdown = function（prop） {

        var options = $ .extend（{
             callback     ：function（） {}，
            时间戳   ：0
        }，支柱）;

        var左，d，h，m，s，位置；

        //初始化插件
        init（this，options）;

        位置=此.find（'.position'）;

        （功能 勾号（） {

            //剩余时间
            = Math .floor（（options.timestamp-（new  Date（）））/ 1000）;

            如果（左< 0）{
                左= 0 ;
            }

            //剩余天数
            d =数学.floor（left / days）;
            updateDuo（0，1，d）;
            左-= d *天；

            //剩余
            小时数h = Math .floor（left / hours）;
            updateDuo（2，3，H）;
            左-=小时*小时;

            //剩余分钟数
            m = Math .floor（left / minutes）;
            updateDuo（4，5，M）;
            左-= m *分钟；

            //剩余秒数
            s =左；
            updateDuo（6，7，S）;

            //调用可选的用户提供的回调
            options.callback（d，h，m，s）;

            //安排在1s内再次调用此函数
            setTimeout（tick，1000）;
        }）（）;

        //这个函数更新一次的两位位置
        功能 updateDuo（次要的，主要的，价值） {
            switchDigit（positions.eq（minor），Math .floor（value / 10）％10）;
            switchDigit（positions.eq（major），value％10）;
        }

        返回 这个;
    };

    / *这两个辅助函数在这里* /

}）（jQuery）;

tick函数每秒调用一次。在其中，我们计算给定时间戳记与当前日期之间的时差。然后，updateDuo函数将更新包含时间单位的数字。

插件准备好了！这是使用方法（如演示中所示）：

资产/js/script.js

$（函数（） {

    var note = $（'#note'），
        TS =新 日期（2012，0，1），
        newYear = true ;

    if（（new  Date（））> ts）{
         //新年来了！指望别的东西。
        //请注意，结尾处的* 1000必须以毫秒为单位
        ts =（new  Date（））。getTime（）+ 10 * 24 * 60 * 60 * 1000 ;
        newYear = false ;
    }

    $（'#countdown'）.countdown（{
         timestamp    ：ts，
         callback     ：function（days，hours，minutes，seconds） {

            var message = “” ;

            消息+ =天+ “天” +（天== 1？''：'s'）+ “，” ;
            消息+ =小时+ “小时” +（小时== 1？''：'s'）+ “，” ;
            消息+ =分钟+ “分钟” +（分钟== 1？''：'s'）+ “和” ;
            消息+ =秒+ “秒” +（秒== 1？''：'s'）+ “ <br />” ;

            如果（newYear）{
                消息+ = “离开直到新年！” ;
            }
            其他{
                消息+ = “从现在起还有10天！” ;
            }

            note.html（message）;
        }
    }）;

}）;

当然，要使其正常工作，您将必须在页面的countdown文件夹中包含css和js文件。

完毕！

您可以将此脚本用作每个启动页面的完美补充。最好的是，它不使用单个图像，而是仅使用CSS完成所有操作。增大或减小字体大小会很好地缩放所有内容，并且只需要一个display：none声明即可隐藏不需要的单位。