2068

Простой и удобный счетчик обратного отсчета


Скрипт инициализации:


$('#СЕЛЕКТОР').timeTo({
            timeTo: new Date(new Date('Wed Dec 31 2019 20:00:00 GMT+0300 (Москва, стандартное время)')),
            countdown: true,
            displayDays: 3,
            theme: "black",
            displayCaptions: true,
            fontSize: 36,
            captionSize: 14,
            lang: 'ru'
        });

Необходимый JS:


/**
 * Time-To jQuery plug-in
 * Show countdown timer or realtime clock
 *
 * @author Oleksii Teterin <altmoc@gmail.com>
 * @version 1.2.3
 * @license MIT http://opensource.org/licenses/MIT
 * @date 2018-06-22
 */
!function(t){"function"==typeof define&&define.amd?define(["jquery"],t):"object"==typeof exports?module.exports=t(require("jquery")):t(jQuery)}(function(t){function i(i,a){var o,l,d,r,c,u,h,p,f,m=this.data(),y=this.find("ul"),g=!1;if(m.vals&&0!==y.length){for(i||(i=m.seconds),m.intervalId&&(g=!0,clearTimeout(m.intervalId)),o=Math.floor(i/s),l=o*s,d=Math.floor((i-l)/n),l+=d*n,r=Math.floor((i-l)/60),l+=60*r,c=i-l,u=(o<100?"0"+(o<10?"0":""):"")+o+(d<10?"0":"")+d+(r<10?"0":"")+r+(c<10?"0":"")+c,h=m.vals.length-1,p=u.length-1;h>=0;h-=1,p-=1)f=parseInt(u.substr(p,1),10),m.vals[h]=f,y.eq(h).children().html(f);(g||a)&&(m.ttStartTime=t.now(),m.intervalId=setTimeout(e.bind(this),1e3),this.data("intervalId",m.intervalId))}}function e(i){var s,n,a,o,l,d,r=this,c=this.find("ul"),u=this.data();return u.vals&&0!==c.length?("undefined"==typeof i&&(i=u.iSec),this.data("tickCount",u.tickCount+1),s=u.vals[i],n=c.eq(i),a=n.children(),o=u.countdown?-1:1,a.eq(1).html(s),s+=o,"function"==typeof u.step&&u.tickCount%u.stepCount===0&&(this.data("tickCount",0),u.step()),i===u.iSec&&(l=u.tickTimeout,d=t.now()-u.ttStartTime,u.sec+=o,l+=Math.abs(u.seconds-u.sec)*l-d,u.intervalId=setTimeout(e.bind(this),l)),s<0||s>u.limits[i]?(s<0?(s=u.limits[i],i===u.iHour&&u.displayDays>0&&0===u.vals[i-1]&&(s=3)):s=0,i>0&&e.call(this,i-1)):!u.countdown&&i===u.iHour&&u.displayDays>0&&2===u.vals[i-1]&&3===u.vals[i]&&(s=0,e.call(this,i-1)),a.eq(0).html(s),t.support.transition?(n.addClass("transition"),n.css({top:0}),setTimeout(function(){n.removeClass("transition"),a.eq(1).html(s),n.css({top:"-"+u.height+"px"}),o>0||i!==u.iSec||(u.sec===u.countdownAlertLimit&&c.parent().addClass("timeTo-alert"),0===u.sec&&(c.parent().removeClass("timeTo-alert"),u.intervalId&&(clearTimeout(u.intervalId),r.data("intervalId",null)),"function"==typeof u.callback&&u.callback()))},410)):n.stop().animate({top:0},400,i!==u.iSec?null:function(){a.eq(1).html(s),n.css({top:"-"+u.height+"px"}),o>0||i!==u.iSec||(u.sec===u.countdownAlertLimit?c.parent().addClass("timeTo-alert"):0===u.sec&&(c.parent().removeClass("timeTo-alert"),u.intervalId&&(clearTimeout(u.intervalId),r.data("intervalId",null)),"function"==typeof u.callback&&u.callback()))}),void(u.vals[i]=s)):(u.intervalId&&(clearTimeout(u.intervalId),this.data("intervalId",null)),void(u.callback&&u.callback()))}var s=86400,n=3600,a={callback:null,step:null,stepCount:1,captionSize:0,countdown:!0,countdownAlertLimit:10,displayCaptions:!1,displayDays:0,displayHours:!0,fontFamily:"Verdana, sans-serif",fontSize:0,lang:"en",languages:{},seconds:0,start:!0,theme:"white",width:25,height:30,gap:11,vals:[0,0,0,0,0,0,0,0,0],limits:[9,9,9,2,9,5,9,5,9],iSec:8,iHour:4,tickTimeout:1e3,intervalId:null,tickCount:0},o={start:function(s){var n;s&&(i.call(this,s),n=setTimeout(e.bind(this),1e3),this.data("ttStartTime",t.now()),this.data("intervalId",n))},stop:function(){var t=this.data();return t.intervalId&&(clearTimeout(t.intervalId),this.data("intervalId",null)),t},reset:function(t){var e=o.stop.call(this),s="undefined"==typeof t?e.seconds:t;this.find("div").css({backgroundPosition:"left center"}),this.find("ul").parent().removeClass("timeTo-alert"),i.call(this,s,!0)}},l={en:{days:"days",hours:"hours",min:"minutes",sec:"seconds"},ru:{days:"дней",hours:"часов",min:"минут",sec:"секунд"},ua:{days:"днiв",hours:"годин",min:"хвилин",sec:"секунд"},de:{days:"Tag",hours:"Uhr",min:"Minuten",sec:"Secunden"},fr:{days:"jours",hours:"heures",min:"minutes",sec:"secondes"},sp:{days:"días",hours:"horas",min:"minutos",sec:"segundos"},it:{days:"giorni",hours:"ore",min:"minuti",sec:"secondi"},nl:{days:"dagen",hours:"uren",min:"minuten",sec:"seconden"},no:{days:"dager",hours:"timer",min:"minutter",sec:"sekunder"},pt:{days:"dias",hours:"horas",min:"minutos",sec:"segundos"},tr:{days:"gün",hours:"saat",min:"dakika",sec:"saniye"},pl:{days:"dni",hours:"godziny",min:"minuty",sec:"secundy"}};return"undefined"==typeof t.support.transition&&(t.support.transition=function(){var t=document.body||document.documentElement,i=t.style,e=void 0!==i.transition||void 0!==i.WebkitTransition||void 0!==i.MozTransition||void 0!==i.MsTransition||void 0!==i.OTransition;return e}()),t.fn.timeTo=function(){var e,d,r,c,u,h,p,f,m,y,g={},v=t.now();for(e=0;e<arguments.length;e+=1)d=arguments[e],0===e&&"string"==typeof d?c=d:"object"==typeof d?"function"==typeof d.getTime?g.timeTo=d:g=t.extend(g,d):"function"==typeof d?g.callback=d:(r=parseInt(d,10),isNaN(r)||(g.seconds=r));if(g.timeTo)g.timeTo.getTime?u=g.timeTo.getTime():"number"==typeof g.timeTo&&(u=g.timeTo),u>v?g.seconds=Math.floor((u-v)/1e3):g.seconds=0;else if(g.time||!g.seconds)if(u=g.time,u||(u=new Date),"object"==typeof u&&u.getTime)g.seconds=u.getHours()*n+60*u.getMinutes()+u.getSeconds(),g.countdown=!1;else if("string"==typeof u){for(p=u.split(":"),f=0,m=1;p.length;)y=p.pop(),f+=y*m,m*=60;g.seconds=f,g.countdown=!1}return g.countdown!==!1&&g.seconds>s&&"undefined"==typeof g.displayDays?(h=Math.floor(g.seconds/s),g.displayDays=h<10&&1||h<100&&2||3):g.displayDays===!0?g.displayDays=3:g.displayDays&&(g.displayDays=g.displayDays>0?Math.floor(g.displayDays):3),this.each(function(){var e,s,n,d,r,u,h,p,f,m,y,v,T,w,I,S,x,b,k,C,M,D,z=t(this),H=z.data();if(H.intervalId&&(clearInterval(H.intervalId),H.intervalId=null),H.vals)"reset"!==c&&t.extend(H,g);else{if(s=H.opt?H.options:g,e=Object.keys(a).reduce(function(t,i){return Array.isArray(a[i])?t[i]=a[i].slice(0):t[i]=a[i],t},{}),H=t.extend(e,s),H.options=s,H.height=Math.round(100*H.fontSize/93)||H.height,H.width=Math.round(.8*H.fontSize+.13*H.height)||H.width,H.displayHours=!(!H.displayDays&&!H.displayHours),d={fontFamily:H.fontFamily},H.fontSize>0&&(d.fontSize=H.fontSize+"px"),r=H.languages[H.lang]||l[H.lang],z.addClass("timeTo").addClass("timeTo-"+H.theme).css(d),u=Math.round(H.height/10),h='<ul style="left:'+u+"px; top:-"+H.height+'px"><li>0</li><li>0</li></ul></div>',p=H.fontSize?' style="width:'+H.width+"px; height:"+H.height+'px;"':' style=""',f='<div class="first"'+p+">"+h,m="<div"+p+">"+h,y="<span>:</span>",v=Math.round(2*H.width+3),T=H.captionSize||H.fontSize&&Math.round(.43*H.fontSize),w=T?"font-size:"+T+"px;":"",I=T?' style="'+w+'"':"",S=(H.displayCaptions?(H.displayHours?'<figure style="max-width:'+v+'px">$1<figcaption'+I+">"+r.hours+"</figcaption></figure>"+y:"")+'<figure style="max-width:'+v+'px">$1<figcaption'+I+">"+r.min+"</figcaption></figure>"+y+'<figure style="max-width:'+v+'px">$1<figcaption'+I+">"+r.sec+"</figcaption></figure>":(H.displayHours?"$1"+y:"")+"$1"+y+"$1").replace(/\$1/g,f+m),H.displayDays>0){for(x=.4*H.fontSize||a.gap,b=f,n=H.displayDays-1;n>0;n-=1)b+=1===n?m.replace('">',"margin-right:"+Math.round(x)+'px">'):m;S=(H.displayCaptions?'<figure style="width:'+Math.round(H.width*H.displayDays+x+4)+'px">$1<figcaption style="'+w+"padding-right:"+Math.round(x)+'px">'+r.days+"</figcaption></figure>":"$1").replace(/\$1/,b)+S}z.html(S)}if(k=z.find("div"),k.length<H.vals.length){for(C=H.vals.length-k.length,M=H.vals,D=H.limits,H.vals=[],H.limits=[],n=0;n<k.length;n+=1)H.vals[n]=M[C+n],H.limits[n]=D[C+n];H.iSec=H.vals.length-1,H.iHour=H.vals.length-5}H.sec=H.seconds,z.data(H),c&&o[c]?o[c].call(z,H.seconds):H.start?o.start.call(z,H.seconds):i.call(z,H.seconds)})},t});

Необходимый CSS:


figure, figcaption {
    display: block;
}

.transition {
    -webkit-transition: top 400ms linear;
    -moz-transition: top 400ms linear;
    -ms-transition: top 400ms linear;
    -o-transition: top 400ms linear;
    transition: top 400ms linear;
}

.timeTo {
    font-family: Tahoma, Verdana, Aial, sans-serif;
    font-size: 28px;
    line-height: 108%;
    font-weight: bold;
}

.timeTo span {
    vertical-align: top;
}

.timeTo.timeTo-white div {
    color: black;
    background: #ffffff; /* Old browsers */
    background: -moz-linear-gradient(top, #ffffff 38%, #cccccc 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(38%,#ffffff), color-stop(100%,#cccccc)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #ffffff 38%,#cccccc 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #ffffff 38%,#cccccc 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #ffffff 38%,#cccccc 100%); /* IE10+ */
    background: linear-gradient(to bottom, #ffffff 38%,#cccccc 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */
}
.timeTo.timeTo-black div {
    color: white;
    background: #45484d; /* Old browsers */
    background: -moz-linear-gradient(top, #45484d 0%, #000000 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#45484d), color-stop(100%,#000000)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #45484d 0%,#000000 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #45484d 0%,#000000 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #45484d 0%,#000000 100%); /* IE10+ */
    background: linear-gradient(to bottom, #45484d 0%,#000000 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
}

.timeTo.timeTo-black .timeTo-alert {
    background: #a74444; /* Old browsers */
    background: -moz-linear-gradient(top, #a74444 0%, #3f0000 67%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a74444), color-stop(67%,#3f0000)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #a74444 0%,#3f0000 67%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #a74444 0%,#3f0000 67%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #a74444 0%,#3f0000 67%); /* IE10+ */
    background: linear-gradient(to bottom, #a74444 0%,#3f0000 67%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a74444', endColorstr='#3f0000',GradientType=0 ); /* IE6-9 */
}

.timeTo.timeTo-white .timeTo-alert {
    background: #ffffff; /* Old browsers */
    background: -moz-linear-gradient(top, #ffffff 35%, #e17373 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(35%,#ffffff), color-stop(100%,#e17373)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #ffffff 35%,#e17373 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #ffffff 35%,#e17373 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #ffffff 35%,#e17373 100%); /* IE10+ */
    background: linear-gradient(to bottom, #ffffff 35%,#e17373 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e17373',GradientType=0 ); /* IE6-9 */
}

.timeTo figure {
    display: inline-block;
    margin: 0;
    padding: 0;
}
.timeTo figcaption {
    text-align: center;
    /*font-size: 12px;*/
    line-height: 80%;
    font-weight: normal;
    color: #888;
}

.timeTo div {
    position: relative;
    display: inline-block;
    width: 25px;
    height: 30px;
    border-top: 1px solid silver;
    border-right: 1px solid silver;
    border-bottom: 1px solid silver;
    overflow: hidden;
}
.timeTo div.first {
    border-left: 1px solid silver;
}

.timeTo ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    position: absolute;
    left: 3px;
}

.timeTo ul li {
    margin: 0;
    padding: 0;
    list-style: none;
}
Ссылка на GIT автора: https://lexxus.github.io/jq-timeTo/

Комментарии

Комментировать