Saya telah mengatur penghitung dengan nomor awal/akhir tetapi ketika saya memberikan ke 27 nomor untuk memulai maka itu dimulai dari 17,28,29 tetapi harus mulai seperti 28,29.

Tautan: https://codepen.io/dokulac-emailure/pen/RwbrEEb

Kami perlu menghapus 17 nomor dan hanya menyimpan 28,29 nomor: http://prntscr.com/osftw9

<script type="text/javascript">
    var clock,countup;

    $(document).ready(function() {


        // Instantiate a counter
        clock = new FlipClock($('.clock'), 27, {
            clockFace: 'Counter',
            autoStart: true,
        });


        countup = setInterval(function() { 
         if(clock.getTime().time > 28) {
           clock.stop();
           clearInterval(countup);
         }
        },500); 


    });
</script>
2
Nims Patel 14 Agustus 2019, 10:27

1 menjawab

Jawaban Terbaik

FlipClock mengalami lebih banyak masalah, bahkan tidak mendukung panggilan balik yang diberikan di situs webnya sendiri. di bawah ini adalah solusi untuk memecahkan masalah.

Ini menjiwai kedua sisi dari nilai sebelumnya sehingga untuk 28 dimulai dengan angka, 2 dari 1 dan 8 dari 7, jadi nilai awal tampak 17

Baru saja menambahkan lebih banyak kondisi opacity (sembunyikan/tampilkan tidak akan berfungsi) untuk menyembunyikan dan menampilkan elemen dan menambahkan kondisi awal dan akhir.

var FlipClock,Base=function(){};Base.extend=function(t,i){"use strict";var e=Base.prototype.extend;Base._prototyping=!0;var s=new this;e.call(s,t),s.base=function(){},delete Base._prototyping;var n=s.constructor,o=s.constructor=function(){if(!Base._prototyping)if(this._constructing||this.constructor==o)this._constructing=!0,n.apply(this,arguments),delete this._constructing;else if(null!==arguments[0])return(arguments[0].extend||e).call(arguments[0],s)};return o.ancestor=this,o.extend=this.extend,o.forEach=this.forEach,o.implement=this.implement,o.prototype=s,o.toString=this.toString,o.valueOf=function(t){return"object"==t?o:n.valueOf()},e.call(o,i),"function"==typeof o.init&&o.init(),o},Base.prototype={extend:function(t,i){if(arguments.length>1){var e=this[t];if(e&&"function"==typeof i&&(!e.valueOf||e.valueOf()!=i.valueOf())&&/\bbase\b/.test(i)){var s=i.valueOf();(i=function(){var t=this.base||Base.prototype.base;this.base=e;var i=s.apply(this,arguments);return this.base=t,i}).valueOf=function(t){return"object"==t?i:s},i.toString=Base.toString}this[t]=i}else if(t){var n=Base.prototype.extend;Base._prototyping||"function"==typeof this||(n=this.extend||n);for(var o={toSource:null},r=["constructor","toString","valueOf"],a=Base._prototyping?0:1;c=r[a++];)t[c]!=o[c]&&n.call(this,c,t[c]);for(var c in t)o[c]||n.call(this,c,t[c])}return this}},Base=Base.extend({constructor:function(){this.extend(arguments[0])}},{ancestor:Object,version:"1.1",forEach:function(t,i,e){for(var s in t)void 0===this.prototype[s]&&i.call(e,t[s],s,t)},implement:function(){for(var t=0;t<arguments.length;t++)"function"==typeof arguments[t]?arguments[t](this.prototype):this.prototype.extend(arguments[t]);return this},toString:function(){return String(this.valueOf())}}),function(t){"use strict";(FlipClock=function(t,i,e){return new FlipClock.Factory(t,i,e)}).Lang={},FlipClock.Base=Base.extend({buildDate:"2013-11-07",version:"0.3.1",constructor:function(i,e){"object"!=typeof i&&(i={}),"object"!=typeof e&&(e={}),this.setOptions(t.extend(!0,{},i,e))},callback:function(t){if("function"==typeof t){for(var i=[],e=1;e<=arguments.length;e++)arguments[e]&&i.push(arguments[e]);t.apply(this,i)}},log:function(t){window.console&&console.log&&console.log(t)},getOption:function(t){return!!this[t]&&this[t]},getOptions:function(){return this},setOption:function(t,i){this[t]=i},setOptions:function(t){for(var i in t)void 0!==t[i]&&this.setOption(i,t[i])}}),FlipClock.Factory=FlipClock.Base.extend({autoStart:!0,callbacks:{destroy:!1,create:!1,init:!1,interval:!1,start:!1,stop:!1,reset:!1},classes:{active:"flip-clock-active",before:"flip-clock-before",divider:"flip-clock-divider",dot:"flip-clock-dot",label:"flip-clock-label",flip:"flip",play:"play",wrapper:"flip-clock-wrapper"},clockFace:"HourlyCounter",defaultClockFace:"HourlyCounter",defaultLanguage:"english",language:"english",lang:!1,face:!0,running:!1,time:!1,timer:!1,lists:[],$wrapper:!1,constructor:function(i,e,s){this.lists=[],this.running=!1,this.base(s),this.$wrapper=t(i).addClass(this.classes.wrapper),this.time=new FlipClock.Time(this,e?Math.round(e):0),this.timer=new FlipClock.Timer(this,s),this.lang=this.loadLanguage(this.language),this.face=this.loadClockFace(this.clockFace,s),this.autoStart&&this.start()},loadClockFace:function(t,i){var e;return t=t.ucfirst()+"Face",(e=FlipClock[t]?new FlipClock[t](this,i):new FlipClock[this.defaultClockFace+"Face"](this,i)).build(),e},loadLanguage:function(t){return FlipClock.Lang[t.ucfirst()]?FlipClock.Lang[t.ucfirst()]:FlipClock.Lang[t]?FlipClock.Lang[t]:FlipClock.Lang[this.defaultLanguage]},localize:function(t,i){var e=this.lang;if(!t)return null;var s=t.toLowerCase();return"object"==typeof i&&(e=i),e&&e[s]?e[s]:t},start:function(t){var i=this;i.running||i.countdown&&!(i.countdown&&i.time.time>0)?i.log("Trying to start timer when countdown already at 0"):(i.face.start(i.time),i.timer.start(function(){i.flip(),"function"==typeof t&&t()}))},stop:function(t){for(var i in this.face.stop(),this.timer.stop(t),this.lists)this.lists[i].stop()},reset:function(t){this.timer.reset(t),this.face.reset()},setTime:function(t){this.time.time=t,this.face.setTime(t)},getTime:function(t){return this.time},setCountdown:function(t){var i=this.running;this.countdown=!!t,i&&(this.stop(),this.start())},flip:function(){this.face.flip()}}),FlipClock.Face=FlipClock.Base.extend({dividers:[],factory:!1,lists:[],constructor:function(t,i){this.base(i),this.factory=t,this.dividers=[]},build:function(){},createDivider:function(i,e,s){"boolean"!=typeof e&&e||(s=e,e=i);var n=['<span class="'+this.factory.classes.dot+' top"></span>','<span class="'+this.factory.classes.dot+' bottom"></span>'].join("");s&&(n=""),i=this.factory.localize(i);var o=['<span class="'+this.factory.classes.divider+" "+(e||"").toLowerCase()+'">','<span class="'+this.factory.classes.label+'">'+(i||"")+"</span>",n,"</span>"];return t(o.join(""))},createList:function(t,i){return"object"==typeof t&&(i=t,t=0),new FlipClock.List(this.factory,t,i)},reset:function(){},setTime:function(t){this.flip(t)},addDigit:function(t){var i=this.createList(t,{classes:{active:this.factory.classes.active,before:this.factory.classes.before,flip:this.factory.classes.flip}});i.$obj.insertBefore(this.factory.lists[0].$obj),this.factory.lists.unshift(i)},start:function(){},stop:function(){},flip:function(i,e){var s=this;e||(s.factory.countdown?(s.factory.time.time<=0&&s.factory.stop(),s.factory.time.time--):s.factory.time.time++);var n=s.factory.lists.length-i.length;n<0&&(n=0);t.each(i,function(t,i){t+=n;var o=s.factory.lists[t];if(o){var r=o.digit;o.select(i),i==r||e||o.play()}else s.addDigit(i),!0});for(var o=0;o<i.length;o++)o>=n&&s.factory.lists[o].digit!=i[o]&&s.factory.lists[o].select(i[o])}}),FlipClock.List=FlipClock.Base.extend({digit:0,classes:{active:"flip-clock-active",before:"flip-clock-before",flip:"flip"},factory:!1,$obj:!1,items:[],constructor:function(t,i,e){this.factory=t,this.digit=i,this.$obj=this.createList(),i>0&&this.select(i),this.factory.$wrapper.append(this.$obj)},select:function(t){void 0===t?t=this.digit:this.digit=t;var i=this.$obj.find('[data-digit="'+t+'"]');this.$obj.find("."+this.classes.active).removeClass(this.classes.active),this.$obj.find("."+this.classes.before).removeClass(this.classes.before);this.factory.countdown?i.is(":last-child")?this.$obj.find(":first-child").addClass(this.classes.before):i.next().addClass(this.classes.before):i.is(":first-child")?this.$obj.find(":last-child").addClass(this.classes.before):i.prev().addClass(this.classes.before),i.addClass(this.classes.active)},play:function(){this.$obj.addClass(this.factory.classes.play)},stop:function(){var t=this;setTimeout(function(){t.$obj.removeClass(t.factory.classes.play)},this.factory.timer.interval)},createList:function(){for(var i=t('<ul class="'+this.classes.flip+" "+(this.factory.running?this.factory.classes.play:"")+'" />'),e=0;e<10;e++){var s=t(['<li data-digit="'+e+'">','<a href="#">','<div class="up">','<div class="shadow"></div>','<div class="inn">'+e+"</div>","</div>",'<div class="down">','<div class="shadow"></div>','<div class="inn">'+e+"</div>","</div>","</a>","</li>"].join(""));this.items.push(s),i.append(s)}return i}}),FlipClock.Time=FlipClock.Base.extend({minimumDigits:0,time:0,factory:!1,constructor:function(t,i,e){this.base(e),this.factory=t,i&&(this.time=i)},convertDigitsToArray:function(t){var i=[];t=t.toString();for(var e=0;e<t.length;e++)t[e].match(/^\d*$/g)&&i.push(t[e]);return i},digit:function(t){var i=this.toString(),e=i.length;return!!i[e-t]&&i[e-t]},digitize:function(i){var e=[];return t.each(i,function(t,i){1==(i=i.toString()).length&&(i="0"+i);for(var s=0;s<i.length;s++)e.push(i[s])}),e.length>this.minimumDigits&&(this.minimumDigits=e.length),this.minimumDigits>e.length&&e.unshift("0"),e},getDayCounter:function(t){var i=[this.getDays(),this.getHours(!0),this.getMinutes(!0)];return t&&i.push(this.getSeconds(!0)),this.digitize(i)},getDays:function(t){var i=this.time/60/60/24;return t&&(i%=7),Math.floor(i)},getHourCounter:function(){return this.digitize([this.getHours(),this.getMinutes(!0),this.getSeconds(!0)])},getHourly:function(){return this.getHourCounter()},getHours:function(t){var i=this.time/60/60;return t&&(i%=24),Math.floor(i)},getMilitaryTime:function(){var t=new Date;return this.digitize([t.getHours(),t.getMinutes(),t.getSeconds()])},getMinutes:function(t){var i=this.time/60;return t&&(i%=60),Math.floor(i)},getMinuteCounter:function(){return this.digitize([this.getMinutes(),this.getSeconds(!0)])},getSeconds:function(t){var i=this.time;return t&&(60==i?i=0:i%=60),Math.ceil(i)},getTime:function(){var t=new Date,i=t.getHours();return this.digitize([i>12?i-12:0===i?12:i,t.getMinutes(),t.getSeconds()])},getWeeks:function(){var t=this.time/60/60/24/7;return mod&&(t%=52),Math.floor(t)},removeLeadingZeros:function(i,e){var s=0,n=[];return t.each(e,function(t,o){t<i?s+=parseInt(e[t],10):n.push(e[t])}),0===s?n:e},toString:function(){return this.time.toString()}}),FlipClock.Timer=FlipClock.Base.extend({callbacks:{destroy:!1,create:!1,init:!1,interval:!1,start:!1,stop:!1,reset:!1},count:0,factory:!1,interval:1e3,constructor:function(t,i){this.base(i),this.factory=t,this.callback(this.callbacks.init),this.callback(this.callbacks.create)},getElapsed:function(){return this.count*this.interval},getElapsedTime:function(){return new Date(this.time+this.getElapsed())},reset:function(t){clearInterval(this.timer),this.count=0,this._setInterval(t),this.callback(this.callbacks.reset)},start:function(t){this.factory.running=!0,this._createTimer(t),this.callback(this.callbacks.start)},stop:function(t){this.factory.running=!1,this._clearInterval(t),this.callback(this.callbacks.stop),this.callback(t)},_clearInterval:function(){clearInterval(this.timer)},_createTimer:function(t){this._setInterval(t)},_destroyTimer:function(t){this._clearInterval(),this.timer=!1,this.callback(t),this.callback(this.callbacks.destroy)},_interval:function(t){this.callback(this.callbacks.interval),this.callback(t),this.count++},_setInterval:function(t){var i=this;i.timer=setInterval(function(){i._interval(t)},this.interval)}}),String.prototype.ucfirst=function(){return this.substr(0,1).toUpperCase()+this.substr(1)},t.fn.FlipClock=function(i,e){return"object"==typeof i&&(e=i,i=0),new FlipClock(t(this),i,e)},t.fn.flipClock=function(i,e){return t.fn.FlipClock(i,e)}}(jQuery),function(t){FlipClock.TwentyFourHourClockFace=FlipClock.Face.extend({constructor:function(t,i){t.countdown=!1,this.base(t,i)},build:function(i){var e=this,s=this.factory.$wrapper.find("ul");(i=i||(this.factory.time.time||this.factory.time.getMilitaryTime())).length>s.length&&t.each(i,function(t,i){e.factory.lists.push(e.createList(i))}),this.dividers.push(this.createDivider()),this.dividers.push(this.createDivider()),t(this.dividers[0]).insertBefore(this.factory.lists[this.factory.lists.length-2].$obj),t(this.dividers[1]).insertBefore(this.factory.lists[this.factory.lists.length-4].$obj),this._clearExcessDigits(),this.autoStart&&this.start()},flip:function(t){t=t||this.factory.time.getMilitaryTime(),this.base(t)},_clearExcessDigits:function(){for(var t=this.factory.lists[this.factory.lists.length-2],i=this.factory.lists[this.factory.lists.length-4],e=6;e<10;e++)t.$obj.find("li:last-child").remove(),i.$obj.find("li:last-child").remove()}})}(jQuery),function(t){FlipClock.CounterFace=FlipClock.Face.extend({autoStart:!1,constructor:function(t,i){t.timer.interval=0,t.autoStart=!1,t.running=!0,t.increment=function(){t.countdown=!1,t.setTime(t.getTime().time+1)},t.decrement=function(){t.countdown=!0,t.setTime(t.getTime().time-1)},t.setValue=function(i){t.setTime(i)},t.setCounter=function(i){t.setTime(i)},this.base(t,i)},build:function(){var i=this,e=this.factory.$wrapper.find("ul"),s=[],n=this.factory.getTime().digitize([this.factory.getTime().time]);n.length>e.length&&t.each(n,function(t,e){var n=i.createList(e);n.select(e),s.push(n)}),t.each(s,function(t,i){i.play()}),this.factory.lists=s},flip:function(t){var i=this.factory.getTime().digitize([this.factory.getTime().time]);this.base(i,t)}})}(jQuery),function(t){FlipClock.DailyCounterFace=FlipClock.Face.extend({showSeconds:!0,constructor:function(t,i){this.base(t,i)},build:function(i,e){var s=this,n=this.factory.$wrapper.find("ul"),o=[],r=0;(e=e||this.factory.time.getDayCounter(this.showSeconds)).length>n.length&&t.each(e,function(t,i){o.push(s.createList(i))}),this.factory.lists=o,this.showSeconds?t(this.createDivider("Seconds")).insertBefore(this.factory.lists[this.factory.lists.length-2].$obj):r=2,t(this.createDivider("Minutes")).insertBefore(this.factory.lists[this.factory.lists.length-4+r].$obj),t(this.createDivider("Hours")).insertBefore(this.factory.lists[this.factory.lists.length-6+r].$obj),t(this.createDivider("Days",!0)).insertBefore(this.factory.lists[0].$obj),this._clearExcessDigits(),this.autoStart&&this.start()},flip:function(t,i){i||(i=this.factory.time.getDayCounter(this.showSeconds)),this.base(i,t)},_clearExcessDigits:function(){for(var t=this.factory.lists[this.factory.lists.length-2],i=this.factory.lists[this.factory.lists.length-4],e=6;e<10;e++)t.$obj.find("li:last-child").remove(),i.$obj.find("li:last-child").remove()}})}(jQuery),function(t){FlipClock.HourlyCounterFace=FlipClock.Face.extend({clearExcessDigits:!0,constructor:function(t,i){this.base(t,i)},build:function(i,e){var s=this,n=this.factory.$wrapper.find("ul"),o=[];(e=e||this.factory.time.getHourCounter()).length>n.length&&t.each(e,function(t,i){o.push(s.createList(i))}),this.factory.lists=o,t(this.createDivider("Seconds")).insertBefore(this.factory.lists[this.factory.lists.length-2].$obj),t(this.createDivider("Minutes")).insertBefore(this.factory.lists[this.factory.lists.length-4].$obj),i||t(this.createDivider("Hours",!0)).insertBefore(this.factory.lists[0].$obj),this.clearExcessDigits&&this._clearExcessDigits(),this.autoStart&&this.start()},flip:function(t,i){i||(i=this.factory.time.getHourCounter()),this.base(i,t)},_clearExcessDigits:function(){for(var t=this.factory.lists[this.factory.lists.length-2],i=this.factory.lists[this.factory.lists.length-4],e=6;e<10;e++)t.$obj.find("li:last-child").remove(),i.$obj.find("li:last-child").remove()}})}(jQuery),jQuery,FlipClock.MinuteCounterFace=FlipClock.HourlyCounterFace.extend({clearExcessDigits:!1,constructor:function(t,i){this.base(t,i)},build:function(){this.base(!0,this.factory.time.getMinuteCounter())},flip:function(t){this.base(t,this.factory.time.getMinuteCounter())}}),function(t){FlipClock.TwelveHourClockFace=FlipClock.TwentyFourHourClockFace.extend({meridium:!1,meridiumText:"AM",build:function(i){i=i||(this.factory.time.time?this.factory.time.time:this.factory.time.getTime()),this.base(i),this.meridiumText=this._isPM()?"PM":"AM",this.meridium=t(['<ul class="flip-clock-meridium">',"<li>",'<a href="#">'+this.meridiumText+"</a>","</li>","</ul>"].join("")),this.meridium.insertAfter(this.factory.lists[this.factory.lists.length-1].$obj)},flip:function(){this.meridiumText!=this._getMeridium()&&(this.meridiumText=this._getMeridium(),this.meridium.find("a").html(this.meridiumText)),this.base(this.factory.time.getTime())},_getMeridium:function(){return(new Date).getHours()>=12?"PM":"AM"},_isPM:function(){return"PM"==this._getMeridium()},_clearExcessDigits:function(){for(var t=this.factory.lists[this.factory.lists.length-2],i=this.factory.lists[this.factory.lists.length-4],e=6;e<10;e++)t.$obj.find("li:last-child").remove(),i.$obj.find("li:last-child").remove()}})}(jQuery),jQuery,FlipClock.Lang.German={years:"Jahre",months:"Monate",days:"Tage",hours:"Stunden",minutes:"Minuten",seconds:"Sekunden"},FlipClock.Lang.de=FlipClock.Lang.German,FlipClock.Lang["de-de"]=FlipClock.Lang.German,FlipClock.Lang.german=FlipClock.Lang.German,jQuery,FlipClock.Lang.English={years:"Years",months:"Months",days:"Days",hours:"Hours",minutes:"Minutes",seconds:"Seconds"},FlipClock.Lang.en=FlipClock.Lang.English,FlipClock.Lang["en-us"]=FlipClock.Lang.English,FlipClock.Lang.english=FlipClock.Lang.English,jQuery,FlipClock.Lang.Spanish={years:"A&#241;os",months:"Meses",days:"D&#205;as",hours:"Horas",minutes:"Minutos",seconds:"Segundo"},FlipClock.Lang.es=FlipClock.Lang.Spanish,FlipClock.Lang["es-es"]=FlipClock.Lang.Spanish,FlipClock.Lang.spanish=FlipClock.Lang.Spanish,jQuery,FlipClock.Lang.French={years:"ans",months:"mois",days:"jours",hours:"heures",minutes:"minutes",seconds:"secondes"},FlipClock.Lang.fr=FlipClock.Lang.French,FlipClock.Lang["fr-ca"]=FlipClock.Lang.French,FlipClock.Lang.french=FlipClock.Lang.French;
.flip-clock-wrapper a{cursor:pointer;text-decoration:none;color:#ccc}.flip-clock-wrapper a:hover{color:#fff}.flip-clock-wrapper ul{list-style:none}.flip-clock-wrapper.clearfix:after,.flip-clock-wrapper.clearfix:before{content:" ";display:table}.flip-clock-wrapper.clearfix:after{clear:both}.flip-clock-wrapper{font:normal 11px "Helvetica Neue",Helvetica,sans-serif;-webkit-user-select:none}.flip-clock-meridium{background:0 0!important;box-shadow:0 0 0!important}.flip-clock-meridium a{color:#313333}.flip-clock-wrapper{text-align:center;position:relative;width:100%;margin:1em}.flip-clock-wrapper:after,.flip-clock-wrapper:before{content:" ";display:table}.flip-clock-wrapper:after{clear:both}.flip-clock-wrapper ul{position:relative;float:left;margin:10px;width:70px;height:135px;font-weight:700;line-height:87px;border-radius:6px;background:#000}.flip-clock-wrapper ul li{z-index:1;position:absolute;left:0;top:0;width:100%;height:100%;line-height:87px;text-decoration:none!important}.flip-clock-wrapper ul li:first-child{z-index:2}.flip-clock-wrapper ul li a{display:block;height:100%;-webkit-perspective:200px;-moz-perspective:200px;perspective:200px;margin:0!important;overflow:visible!important;cursor:default!important}.flip-clock-wrapper ul li a div{z-index:1;position:absolute;left:0;width:100%;height:50%;font-size:80px;overflow:hidden;outline:1px solid transparent}.flip-clock-wrapper ul li a div .shadow{position:absolute;width:100%;height:100%;z-index:2}.flip-clock-wrapper ul li a div.up{-webkit-transform-origin:50% 100%;-moz-transform-origin:50% 100%;-ms-transform-origin:50% 100%;-o-transform-origin:50% 100%;transform-origin:50% 100%;top:0}.flip-clock-wrapper ul li a div.up:after{content:"";position:absolute;top:65px;left:0;z-index:5;width:100%;height:3px;background-color:#000;background-color:rgba(0,0,0,.4)}.flip-clock-wrapper ul li a div.down{-webkit-transform-origin:50% 0;-moz-transform-origin:50% 0;-ms-transform-origin:50% 0;-o-transform-origin:50% 0;transform-origin:50% 0;bottom:0;border-bottom-left-radius:6px;border-bottom-right-radius:6px}.flip-clock-wrapper ul li a div div.inn{position:absolute;left:0;z-index:1;width:100%;height:200%;color:#ccc;text-shadow:0 1px 2px #000;text-align:center;line-height:130px;background-color:#333;border-radius:6px;font-size:120px}.flip-clock-wrapper ul li a div.up div.inn{top:0}.flip-clock-wrapper ul li a div.down div.inn{bottom:0}.flip-clock-wrapper ul.play li.flip-clock-before{z-index:3}.flip-clock-wrapper .flip{box-shadow:0 2px 5px rgba(0,0,0,.7)}.flip-clock-wrapper ul.play li.flip-clock-active{-webkit-animation:asd .5s .5s linear both;-moz-animation:asd .5s .5s linear both;animation:asd .5s .5s linear both;z-index:5}.flip-clock-divider{float:left;display:inline-block;position:relative;width:20px;height:100px}.flip-clock-divider:first-child{width:0}.flip-clock-dot{display:block;background:#323434;width:10px;height:10px;position:absolute;border-radius:50%;box-shadow:0 0 5px rgba(0,0,0,.5);left:5px}.flip-clock-divider .flip-clock-label{position:absolute;top:-1.5em;right:-86px;color:#000;text-shadow:none}.flip-clock-divider.minutes .flip-clock-label{right:-88px}.flip-clock-divider.seconds .flip-clock-label{right:-91px}.flip-clock-dot.top{top:30px}.flip-clock-dot.bottom{bottom:30px}@-webkit-keyframes asd{0%{z-index:2}20%{z-index:4}100%{z-index:4}}@-moz-keyframes asd{0%{z-index:2}20%{z-index:4}100%{z-index:4}}@-o-keyframes asd{0%{z-index:2}20%{z-index:4}100%{z-index:4}}@keyframes asd{0%{z-index:2}20%{z-index:4}100%{z-index:4}}.flip-clock-wrapper ul.play li.flip-clock-active .down{z-index:2;-webkit-animation:turn .5s .5s linear both;-moz-animation:turn .5s .5s linear both;animation:turn .5s .5s linear both}@-webkit-keyframes turn{0%{-webkit-transform:rotateX(90deg)}100%{-webkit-transform:rotateX(0)}}@-moz-keyframes turn{0%{-moz-transform:rotateX(90deg)}100%{-moz-transform:rotateX(0)}}@-o-keyframes turn{0%{-o-transform:rotateX(90deg)}100%{-o-transform:rotateX(0)}}@keyframes turn{0%{transform:rotateX(90deg)}100%{transform:rotateX(0)}}.flip-clock-wrapper ul.play li.flip-clock-before .up{z-index:2;-webkit-animation:turn2 .5s linear both;-moz-animation:turn2 .5s linear both;animation:turn2 .5s linear both}@-webkit-keyframes turn2{0%{-webkit-transform:rotateX(0)}100%{-webkit-transform:rotateX(-90deg)}}@-moz-keyframes turn2{0%{-moz-transform:rotateX(0)}100%{-moz-transform:rotateX(-90deg)}}@-o-keyframes turn2{0%{-o-transform:rotateX(0)}100%{-o-transform:rotateX(-90deg)}}@keyframes turn2{0%{transform:rotateX(0)}100%{transform:rotateX(-90deg)}}.flip-clock-wrapper ul li.flip-clock-active{z-index:3}.flip-clock-wrapper ul.play li.flip-clock-before .up .shadow{background:-moz-linear-gradient(top,rgba(0,0,0,.1) 0,#000 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,rgba(0,0,0,.1)),color-stop(100%,#000));background:linear,top,rgba(0,0,0,.1) 0,#000 100%;background:-o-linear-gradient(top,rgba(0,0,0,.1) 0,#000 100%);background:-ms-linear-gradient(top,rgba(0,0,0,.1) 0,#000 100%);background:linear,to bottom,rgba(0,0,0,.1) 0,#000 100%;-webkit-animation:show .5s linear both;-moz-animation:show .5s linear both;animation:show .5s linear both}.flip-clock-wrapper ul.play li.flip-clock-active .up .shadow{background:-moz-linear-gradient(top,rgba(0,0,0,.1) 0,#000 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,rgba(0,0,0,.1)),color-stop(100%,#000));background:linear,top,rgba(0,0,0,.1) 0,#000 100%;background:-o-linear-gradient(top,rgba(0,0,0,.1) 0,#000 100%);background:-ms-linear-gradient(top,rgba(0,0,0,.1) 0,#000 100%);background:linear,to bottom,rgba(0,0,0,.1) 0,#000 100%;-webkit-animation:hide .5s .3s linear both;-moz-animation:hide .5s .3s linear both;animation:hide .5s .3s linear both}.flip-clock-wrapper ul.play li.flip-clock-before .down .shadow{background:-moz-linear-gradient(top,#000 0,rgba(0,0,0,.1) 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#000),color-stop(100%,rgba(0,0,0,.1)));background:linear,top,#000 0,rgba(0,0,0,.1) 100%;background:-o-linear-gradient(top,#000 0,rgba(0,0,0,.1) 100%);background:-ms-linear-gradient(top,#000 0,rgba(0,0,0,.1) 100%);background:linear,to bottom,#000 0,rgba(0,0,0,.1) 100%;-webkit-animation:show .5s linear both;-moz-animation:show .5s linear both;animation:show .5s linear both}.flip-clock-wrapper ul.play li.flip-clock-active .down .shadow{background:-moz-linear-gradient(top,#000 0,rgba(0,0,0,.1) 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#000),color-stop(100%,rgba(0,0,0,.1)));background:linear,top,#000 0,rgba(0,0,0,.1) 100%;background:-o-linear-gradient(top,#000 0,rgba(0,0,0,.1) 100%);background:-ms-linear-gradient(top,#000 0,rgba(0,0,0,.1) 100%);background:linear,to bottom,#000 0,rgba(0,0,0,.1) 100%;-webkit-animation:hide .5s .3s linear both;-moz-animation:hide .5s .3s linear both;animation:hide .5s .2s linear both}@-webkit-keyframes show{0%{opacity:0}100%{opacity:1}}@-moz-keyframes show{0%{opacity:0}100%{opacity:1}}@-o-keyframes show{0%{opacity:0}100%{opacity:1}}@keyframes show{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes hide{0%{opacity:1}100%{opacity:0}}@-moz-keyframes hide{0%{opacity:1}100%{opacity:0}}@-o-keyframes hide{0%{opacity:1}100%{opacity:0}}@keyframes hide{0%{opacity:1}100%{opacity:0}}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Countdown Clock</title>
    <link rel="stylesheet" href="./style.css">
</head>

<body>
    <!-- partial:index.partial.html -->
    <html>

    <head>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script src="http://flipclockjs.com/_themes/flipclockjs/js/flipclock/flipclock.js"></script>

    </head>

    <body>
        <div class="clock" style="margin:2em;"></div>

        <script type="text/javascript">
            var clock, countup;
            var start = 27, end = 29;
            $('.clock').css('opacity',0);
            $(document).ready(function () {
                // Instantiate a counter
                clock = new FlipClock($('.clock'), start, {
                    clockFace: 'Counter',
                    autoStart: true
                });

                countup = setInterval(function () {
                    if (clock.getTime().time >= end) {
                        clock.stop();
                        clearInterval(countup);
                    }else{
                        clock.increment();
                        if(clock.getTime().time > start){
                            $('.clock').css('opacity',1);
                        }
                    }
                }, 1000);
            });
        </script>

    </body>

    </html>

</body>

</html>
1
Rohit.007 14 Agustus 2019, 09:39