Angular 倒数计时器

Question

我遇到了这个 angular 计时器，非常适合我。但是，当它到达倒计时日期时，我似乎无法成功让它停止。我基本上希望它停在 00:00:00。有什么帮助吗？ Angular Countdown Timer

Check Codepen for code

Answer 1

如果我对问题的理解正确，这里是解决方案，它不在 CoffeeScript 中（但是适应起来非常简单），而是在普通的旧 javascript 中。我评论了编辑

(function() {
  angular.module('app', []).directive('countdown', [
    'Util',
    '$interval',
    function(Util,
    $interval) {
      return {
        restrict: 'A',
        scope: {
          date: '@'
        },
        link: function(scope,
    element) {
          var future;
          future = new Date(scope.date);
          //----you need to keep a reference to $interval----
          var int = $interval(function() {
            var diff;
            diff = Math.floor((future.getTime() - new Date().getTime()) / 1000);
            //----just check for the value of 'diff' when it becomes 0 you have to clear $interval
            if(diff===0) {
              $interval.cancel(int);
              return element.text("BOOM!")
            }
            return element.text(Util.dhms(diff));
          },
    1000);
        }
      };
    }
  ]).factory('Util', [
    function() {
      return {
        dhms: function(t) {
          var days,
    hours,
    minutes,
    seconds;
          days = Math.floor(t / 86400);
          t -= days * 86400;
          hours = Math.floor(t / 3600) % 24;
          t -= hours * 3600;
          minutes = Math.floor(t / 60) % 60;
          t -= minutes * 60;
          seconds = t % 60;
          return [days + 'd',
    hours + 'h',
    minutes + 'm',
    seconds + 's'].join(' ');
        }
      };
    }
  ]);

}).call(this);

Answer 2

我相信这对您有用，在 Coffee Script 中，您应该能够将其复制到您的示例中。关键是当diff为零时打印出来，然后取消定时器。

angular.module 'app', []

.directive 'countdown', ['Util', '$interval', (Util, $interval) ->
  restrict: 'A'
  scope:
    date: '@'
  link: (scope, element) ->    
    future = new Date scope.date
    int = $interval ->
      diff = Math.floor (future.getTime() - new Date().getTime()) / 1000
      if (diff >= 0)
        element.text  Util.dhms diff
      else
        element.text  Util.dhms 0
        $interval.cancel int
    , 1000
    return
]

.factory 'Util', [ ->
  {
    dhms: (t) ->
      days = Math.floor t / 86400
      t -= days * 86400
      hours = Math.floor(t / 3600) % 24
      t -= hours * 3600
      minutes = Math.floor(t / 60) % 60
      t -= minutes * 60
      seconds = t % 60
      [ days + 'd', hours + 'h', minutes + 'm', seconds + 's' ].join ' '
  }
]

Angular 倒数计时器

Angular Countdown Timer

javascript

angularjs

angularjs-directive