制作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);

            ifthis!= “ Seconds”){
                elem.append('<span class =“ countDiv countDiv' + i + '”> </ span>');
            }
        });

    }

    //在两个数字之间创建动画过渡
    函数 switchDigitposition,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'opacity0 },'fast'function {
                digit.remove();
            })

        替代品
            .delay(100
            .animate({ top0opacity1 },'fast'function {
                replace.addClass('static');
            });
    }

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

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

函数$ {

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

    //创建插件
    $ .fn.countdown = functionprop {

        var options = $ .extend({
             callbackfunction {},
            时间戳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(01,d);
            左-= d *天;

            //剩余
            小时h = Math .floor(left / hours);
            updateDuo(23,H);
            左-=小时*小时;

            //剩余分钟数
            m = Math .floor(left / minutes);
            updateDuo(45,M);
            左-= m *分钟;

            //剩余秒数
            s =左;
            updateDuo(67,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 = 日期201201),
        newYear = true ;

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

    $('#countdown').countdown({
         timestamp    :ts,
         callbackfunctiondays,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声明即可隐藏不需要的单位。

©️李联华的博客网 当前IP地址:3.233.242.67,欢迎您的访问!

温馨提示 : 非特殊注明,否则均为李联华的博客原创文章,本站文章未经授权禁止任何形式转载
文章链接:https://www.ooize.com/make-jquery-countdown-timer.html

订阅文章

在下面输入您的电子邮件地址以订阅我们的文章

订阅
提醒
guest

0 评论
内联反馈
查看所有评论
Loading...