2016-07-25 95 views
1

我正在處理一個html文件,我正在倒計時計時器在頁面中間倒計時直到網站發佈。JS倒數計時器的網頁計數從打開頁面

截圖:http://image.prntscr.com/image/4fd8693f6df14261aacb8333ee4a4859.png(我聯繫,因爲它是在2MB)

   var targetdate = new Date().getTime() + 2592000000 //Time in milliseconds, in this case it's 1 month. 
        slidechanges = [ 
           { days:0, hours:0, minutes:0, seconds:6, slide:2}, 
           { days:0, hours:0, minutes:0, seconds:0, slide:3} 
            ], 
       quickjump = 10000, 
       api = revapi432; 

      !function(t){"use strict";"function"==typeof define&&define.amd?define(["jquery"],t):t(jQuery)}(function(t){"use strict";function e(t){if(t instanceof Date)return t;if(String(t).match(o))return String(t).match(/^[0-9]*$/)&&(t=Number(t)),String(t).match(/\-/)&&(t=String(t).replace(/\-/g,"/")),new Date(t);throw new Error("Couldn't cast `"+t+"` to a date object.")}function s(t){var e=t.toString().replace(/([.?*+^$[\]\\(){}|-])/g,"\\$1");return new RegExp(e)}function n(t){return function(e){var n=e.match(/%(-|!)?[A-Z]{1}(:[^;]+;)?/gi);if(n)for(var a=0,o=n.length;o>a;++a){var r=n[a].match(/%(-|!)?([a-zA-Z]{1})(:[^;]+;)?/),l=s(r[0]),c=r[1]||"",u=r[3]||"",f=null;r=r[2],h.hasOwnProperty(r)&&(f=h[r],f=Number(t[f])),null!==f&&("!"===c&&(f=i(u,f)),""===c&&10>f&&(f="0"+f.toString()),e=e.replace(l,f.toString()))}return e=e.replace(/%%/,"%")}}function i(t,e){var s="s",n="";return t&&(t=t.replace(/(:|;|\s)/gi,"").split(/\,/),1===t.length?s=t[0]:(n=t[0],s=t[1])),1===Math.abs(e)?n:s}var a=[],o=[],r={precision:100,elapse:!1};o.push(/^[0-9]*$/.source),o.push(/([0-9]{1,2}\/){2}[0-9]{4}([0-9]{1,2}(:[0-9]{2}){2})?/.source),o.push(/[0-9]{4}([\/\-][0-9]{1,2}){2}([0-9]{1,2}(:[0-9]{2}){2})?/.source),o=new RegExp(o.join("|"));var h={Y:"years",m:"months",n:"daysToMonth",w:"weeks",d:"daysToWeek",D:"totalDays",H:"hours",M:"minutes",S:"seconds"},l=function(e,s,n){this.el=e,this.$el=t(e),this.interval=null,this.offset={},this.options=t.extend({},r),this.instanceNumber=a.length,a.push(this),this.$el.data("countdown-instance",this.instanceNumber),n&&("function"==typeof n?(this.$el.on("update.countdown",n),this.$el.on("stoped.countdown",n),this.$el.on("finish.countdown",n)):this.options=t.extend({},r,n)),this.setFinalDate(s),this.start()};t.extend(l.prototype,{start:function(){null!==this.interval&&clearInterval(this.interval);var t=this;this.update(),this.interval=setInterval(function(){t.update.call(t)},this.options.precision)},stop:function(){clearInterval(this.interval),this.interval=null,this.dispatchEvent("stoped")},toggle:function(){this.interval?this.stop():this.start()},pause:function(){this.stop()},resume:function(){this.start()},remove:function(){this.stop.call(this),a[this.instanceNumber]=null,delete this.$el.data().countdownInstance},setFinalDate:function(t){this.finalDate=e(t)},update:function(){if(0===this.$el.closest("html").length)return void this.remove();var e,s=void 0!==t._data(this.el,"events"),n=new Date;e=this.finalDate.getTime()-n.getTime(),e=Math.ceil(e/1e3),e=!this.options.elapse&&0>e?0:Math.abs(e),this.totalSecsLeft!==e&&s&&(this.totalSecsLeft=e,this.elapsed=n>=this.finalDate,this.offset={seconds:this.totalSecsLeft%60,minutes:Math.floor(this.totalSecsLeft/60)%60,hours:Math.floor(this.totalSecsLeft/60/60)%24,days:Math.floor(this.totalSecsLeft/60/60/24)%7,daysToWeek:Math.floor(this.totalSecsLeft/60/60/24)%7,daysToMonth:Math.floor(this.totalSecsLeft/60/60/24%30.4368),totalDays:Math.floor(this.totalSecsLeft/60/60/24),weeks:Math.floor(this.totalSecsLeft/60/60/24/7),months:Math.floor(this.totalSecsLeft/60/60/24/30.4368),years:Math.abs(this.finalDate.getFullYear()-n.getFullYear())},this.options.elapse||0!==this.totalSecsLeft?this.dispatchEvent("update"):(this.stop(),this.dispatchEvent("finish")))},dispatchEvent:function(e){var s=t.Event(e+".countdown");s.finalDate=this.finalDate,s.elapsed=this.elapsed,s.offset=t.extend({},this.offset),s.strftime=n(this.offset),this.$el.trigger(s)}}),t.fn.countdown=function(){var e=Array.prototype.slice.call(arguments,0);return this.each(function(){var s=t(this).data("countdown-instance");if(void 0!==s){var n=a[s],i=e[0];l.prototype.hasOwnProperty(i)?n[i].apply(n,e.slice(1)):null===String(i).match(/^[$A-Z_][0-9A-Z_$]*$/i)?(n.setFinalDate.call(n,i),n.start()):t.error("Method %s does not exist on jQuery.countdown".replace(/\%s/gi,i))}else new l(this,e[0],e[1])})}}); 


      var currentd,currenth,currentm,currents; 

      function animateAndUpdate(o,nt,ot) { 
       if (ot==undefined) { 
       o.html(nt); 
       } else { 
        if (o.css("opacity")>0) { 
        punchgs.TweenLite.fromTo(o,0.45, 
        {autoAlpha:1,rotationY:0,scale:1}, 
        {autoAlpha:0,rotationY:-180,scale:0.5,ease:punchgs.Back.easeIn,onComplete:function() { o.html(nt);} }); 

       punchgs.TweenLite.fromTo(o,0.45, 
        {autoAlpha:0,rotationY:180,scale:0.5}, 
        {autoAlpha:1,rotationY:0,scale:1,ease:punchgs.Back.easeOut,delay:0.5 }); 
        } else { 
        o.html(nt); 
        } 
       } 
       return nt; 
      } 

      function countprocess(event) { 

       var newd = event.strftime('%D'), 
        newh = event.strftime('%H'), 
        newm = event.strftime('%M'), 
        news = event.strftime('%S'); 
       if (newd != currentd) currentd = animateAndUpdate(jQuery('#c_days'),newd,currentd); 
       if (newh != currenth) currenth = animateAndUpdate(jQuery('#c_hours'),newh,currenth); 
       if (newm != currentm) currentm = animateAndUpdate(jQuery('#c_minutes'),newm,currentm); 
       if (news != currents) currents = animateAndUpdate(jQuery('#c_seconds'),news,currents); 

       jQuery.each(slidechanges,function(i,obj) { 
       var dr = obj.days==undefined || obj.days>=newd, 
        hr = obj.hours==undefined || obj.hours>=newh, 
        mr = obj.minutes==undefined || obj.minutes>=newm, 
        sr = obj.seconds==undefined || obj.seconds>=news; 
        if (dr && hr && mr && sr && !obj.changedown) { 
        api.revshowslide(obj.slide); 
        obj.changedown = true; 
        } 
       }) 
      } 

      jQuery('#skipahead').click(function(){ 
       var smalloffset = new Date().getTime() + quickjump; 
      api.countdown(smalloffset,countprocess); 
      }); 

      api.countdown(targetdate, countprocess); 
     } 
    }); /*ready*/ 

現在我的問題在這裏,當頁面被載入計數器開始從30天減計數。 有沒有辦法獲得第一個字符串(因爲這是我認爲的問題)作爲自定義日期設置,我可以選擇何時開始計數,或者如果可能的話,哪裏更重要?

該頁面與此代碼非常接近,一個錯誤的值會阻止加載頁面,計數器處理頁面上的各種事件,我希望保留該頁面。

Countdown.js jQuery引擎由hilios製作。 頁面的代碼是:https://github.com/hilios/jQuery.countdown

感謝所有幫助我得到的,

雨雪冰凍

+0

該插件的演示顯示您需要做什麼......設置絕對目標日期 – charlietfl

+0

圖像已損壞。 – geek1011

回答

0

更改以下行:

var targetdate = new Date().getTime() + 2592000000

這樣:

var targetdate = new Date(2016, 7, 1, 5, 30, 0) // change the values to correspond with the date you want

這會將目標日期設置爲8月1日星期一的5:30。

有關創建日期的更多信息,請參閱https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date

+0

看來我不能公開發表您的評論,但修復了它! –

+0

@frozen你應該能夠將答案標記爲正確答案。但總是很樂意幫忙,這並不重要。 –