Question

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

Check Codepen for code

Answer 1

如果我正确地理解了这个问题，那么这里的解决方案就不在CoffeScript中（但是很容易适应），它是用普通的旧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中，您应该可以将此权限复制到示例中。关键是要在差异达到零时打印出来，然后取消计时器。

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 ' '
  }
]

角度倒数计时器

2 个答案: