Question

我有这个倒计时代码：

!function(a){"function"==typeof define&&define.amd?define(["jquery"],a):a(jQuery)}(function(a){"use strict";function b(a){if(a instanceof Date)return a;if(String(a).match(g))return String(a).match(/^[0-9]*$/)&&(a=Number(a)),new Date(a);throw new Error("Couldn't cast `"+a+"` to a date object.")}function c(a){return function(b){var c=b.match(/%(-|!)?[A-Z]{1}(:[^;]+;)?/gi);if(c)for(var e=0,f=c.length;f>e;++e){var g=c[e].match(/%(-|!)?([a-zA-Z]{1})(:[^;]+;)?/),i=new RegExp(g[0]),j=g[1]||"",k=g[3]||"",l=null;g=g[2],h.hasOwnProperty(g)&&(l=h[g],l=Number(a[l])),null!==l&&("!"===j&&(l=d(k,l)),""===j&&10>l&&(l="0"+l.toString()),b=b.replace(i,l.toString()))}return b=b.replace(/%%/,"%")}}function d(a,b){var c="s",d="";return a&&(a=a.replace(/(:|;|\s)/gi,"").split(/\,/),1===a.length?c=a[0]:(d=a[0],c=a[1])),1===Math.abs(b)?d:c}var e=100,f=[],g=[];g.push(/^[0-9]*$/.source),g.push(/([0-9]{1,2}\/){2}[0-9]{4}( [0-9]{1,2}(:[0-9]{2}){2})?/.source),g.push(/[0-9]{4}(\/[0-9]{1,2}){2}( [0-9]{1,2}(:[0-9]{2}){2})?/.source),g=new RegExp(g.join("|"));var h={Y:"years",m:"months",w:"weeks",d:"days",D:"totalDays",H:"hours",M:"minutes",S:"seconds"},i=function(b,c,d){this.el=b,this.$el=a(b),this.interval=null,this.offset={},this.setFinalDate(c),this.instanceNumber=f.length,f.push(this),this.$el.data("countdown-instance",this.instanceNumber),d&&(this.$el.on("update.countdown",d),this.$el.on("stoped.countdown",d),this.$el.on("finish.countdown",d)),this.start()};a.extend(i.prototype,{start:function(){if(null!==this.interval)throw new Error("Countdown is already running!");var a=this;this.update(),this.interval=setInterval(function(){a.update.call(a)},e)},stop:function(){clearInterval(this.interval),this.interval=null,this.dispatchEvent("stoped")},pause:function(){this.stop.call(this)},resume:function(){this.start.call(this)},remove:function(){this.stop(),delete f[this.instanceNumber]},setFinalDate:function(a){this.finalDate=b(a)},update:function(){return 0===this.$el.closest("html").length?(this.remove(),void 0):(this.totalSecsLeft=this.finalDate.valueOf()-(new Date).valueOf(),this.totalSecsLeft=Math.ceil(this.totalSecsLeft/1e3),this.totalSecsLeft=this.totalSecsLeft<0?0:this.totalSecsLeft,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,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),years:Math.floor(this.totalSecsLeft/60/60/24/365)},0===this.totalSecsLeft?(this.stop(),this.dispatchEvent("finish")):this.dispatchEvent("update"),void 0)},dispatchEvent:function(b){var d=a.Event(b+".countdown");d.finalDate=this.finalDate,d.offset=a.extend({},this.offset),d.strftime=c(this.offset),this.$el.trigger(d)}}),a.fn.countdown=function(){var b=Array.prototype.slice.call(arguments,0);return this.each(function(){var c=a(this).data("countdown-instance");if(void 0!==c){var d=f[c],e=b[0];i.prototype.hasOwnProperty(e)?d[e].apply(d,b.slice(1)):null===String(e).match(/^[$A-Z_][0-9A-Z_$]*$/i)?d.setFinalDate.call(d,e):a.error("Method %s does not exist on jQuery.countdown".replace(/\%s/gi,e))}else new i(this,b[0],b[1])})}});




$(document).ready(function() {
  $('#countdown').countdown('2017/09/29 21:20:01', function(event) {
    $(this).html(event.strftime('%D:%H:%M:%S'));
  });                             
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="clr"></div>
<div id="countdown"></div>
<div class="clr"></div>

我想在倒计时结束时刷新页面。

这是代码中最重要的部分：

$(document).ready(function() {
  $('#countdown').countdown('2017/09/29 21:20:01', function(event) {
    $(this).html(event.strftime('%D:%H:%M:%S'));
  });                             
});

Answer 1

试试这段代码：

$('#clock').countdown('2017/09/29 21:20:01', {
    elapse: true
}).on('update.countdown', function(event) {
    var $this = $(this);
    if (event.elapsed) {
        location.reload()
    } else {
        $this.html(event.strftime('To end: <span>%H:%M:%S</span>'));
    }
});

有关示例，请参阅this URL。

Scott Marcus的

编辑：在这种情况下很难满足这个标准，因为OP没有任何破坏的代码可以纠正（他们只需要为它们编写的所有代码）。那就是说......

问题是我们需要在某处放置页面刷新代码：location.reload()并且解决方案（如库文档中所述）是使用update.countdown函数在经过一段时间后触发代码。

OP的

编辑：我还在我的答案中找到了location.reload()代码，以便更容易理解。

Answer 2

您需要了解event documentation。您要查找的事件是finish，因为您想在倒计时完成后刷新页面。为了进一步阅读，我建议阅读jQuery的事件处理程序附件on()。基本上，The Final Countdown一旦完成就触发事件finish.countdown，以便jQuery可以监听事件并正确处理它。对于DOM事件处理程序，我建议阅读它here。

$(document).ready(function() {
    /* Variable Defaults */
    var countDownTo = new Date().setSeconds(new Date().getSeconds() + 5);
    
    /* Init Countdown Plugin */
    $('#countdown').countdown(countDownTo, function(event) {
        /* Output String */
        $(this).html(event.strftime('%D:%H:%M:%S'));
    }).on('finish.countdown', function() {
        /* Refresh Page on Load */
        console.log('location.reload()');
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.countdown/2.2.0/jquery.countdown.min.js"></script>
<div id="countdown"></div>

倒计时结束后刷新页面

2 个答案: