Question

我需要像这样倒计时：

<div  class="countdown" countdown="1482400417">00:10:02</div>

其中倒计时属性是其完成的时间。差异显示为小时：分钟：秒，并且每秒更新一次。

当我有多次这样的倒计时时，我如何在angularjs中这样做？

我做了一点挖掘，我找到了一些类似的东西，但我无法理解代码。我发现的代码很糟糕：

Travian.Directive.countdown = function(a) {
    return function(c, b, l) {
        function g() {
            if ("undefined" != typeof a.K()) {
                h = b.attr("countdown");
                var c = h - a.K();
                if (0 > c || isNaN(c)) {
                    return Travian.tick.unbind(e), e = null, b.text(
                        la(0)), !1
                }
                var g = "";
                l.showDaysLimit && c >= l.showDaysLimit ? (c = Math
                    .round(c / 86400), c == f ? g = m : (g =
                        Travian.translate("ForDays", {
                            x: c
                        }), f = c)) : g = la(c, l.countdownShort &&
                    c < l.countdownShort);
                m != g && (m = g, b.text(g))
            }
        }
        var h, e = null,
            m = "",
            f = 0;
        l.showDaysLimit && c.$on("newTranslation", function() {
            f = 0
        });
        l.$observe("countdown", function(a) {
            "undefined" != typeof a && null == e && (e =
                Travian.tick.bind(g))
        });
        b.bind("$destroy", function() {
            Travian.tick.unbind(e)
        })
    }
};



  Travian.tick = new function() {
    var a = {};
    (function B() {
      window.setTimeout(B, 100);
      var b = {}, c;
      for(c in a) {
        a.hasOwnProperty(c) && "function" === typeof a[c] && (a[c](), b[c] = a[c])
      }
      a = b
    })();
    return{bind:function(b, c) {
      "function" === typeof b && (c = b, b = na("tick"));
      c();
      a[b] = c;
      return b
    }, unbind:function(b) {
      a[b] = null
    }}
  };

Answer 1

不完全是你要求的，但这应该让你开始。

您可以创建一个包含并显示倒计时值的指令。此值每秒使用$interval服务更新。

myApp.directive('countdown', function() {
    return {
        restrict: 'E',
        template: '<div>{{countdownVal}}</div>',
        scope: {
            initVal: '='
        },
        controller: function($scope, $interval) {
                $scope.countdownVal = $scope.initVal;

            $interval(function () {
                    if ($scope.countdownVal > 0) {}
                        $scope.countdownVal--;
                }
            }, 1000);
        }
    }
});

如果有一个起点，您可以调整此代码以添加格式，并使该指令可用作属性而不是元素。

请参阅this JSFiddle中的具体示例。

另外，请记住，完成后应该消除间隔。来自the docs:

注意：必须明确销毁此服务创建的间隔当你完成它们。特别是他们不是当控制器的范围或指令时自动销毁元素被破坏了。你应该考虑到这一点确保始终在适当的时候取消间隔。看到以下示例了解有关如何以及何时执行此操作的更多详细信息。

angularjs多次倒计时

1 个答案: