2016-07-25 90 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你应该能够将答案标记为正确答案。但总是很乐意帮忙,这并不重要。 –