使用angular js进行时间倒计时

您的代码将如下所示。前提是您返回的值与上面提到的值相同。**

在HTML中使用｛｛updatedTime｝｝。

**

var timeUpdater = $interval(function() {
   var vals = $scope.endingdays(deal.endDate);
   $scope.updatedTime = vals[0]+':'+vals[1]+':'+vals[2];
}, 100 );// This is the time in miliseconds to update .
};
// To kill the timer
$scope.killTimeUpdater = function() {
   if (angular.isDefined(timeUpdater)) {
     $interval.cancel(timeUpdater);
     timeUpdater = undefined;
   }
};

您将使用$filter和$interval指令来确保在页面上显示计时器。计时器显示代码演示

使用$interval并考虑使用自定义过滤器

var app = angular.module("timerApp", []);
app.controller("timerController",['$scope','$interval','$filter', function($scope, $interval, $filter){    
//initalizing variables so they aren't defined for the first time in the time
 // (And therefore take a second to show up)
    $scope.twoDaysFromNow = Math.floor(Date.now() / 1000) + ( 60 * 60 * 24 * 2);
    $scope.goal = ($scope.twoDaysFromNow);
    $scope.now  = Math.floor(Date.now() / 1000);
    $scope.time = $scope.goal - $scope.now;
  
  
    $interval(function(){   
        $scope.now  = Math.floor(Date.now() / 1000);
        $scope.time = $scope.goal - $scope.now;
    },1000,0,null);
}]);
app.filter('timeleft', function() {
  function isInteger(x) {
        return x % 1 === 0;
    }
  
  return function(value) {
    if (value && isInteger(value))
      return  toTimeLeft(value);
    
    return value;
  };
});
function toTimeLeft(t) {
                    var days, hours, minutes, seconds;
  
                    //display the words "days", "Hours" etc.
                    var daysD = ' day', hoursD = ' hour', minutesD = ' minute', secondsD = ' second';
                    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;
  
                    //Add an 's' on the end if it's not 1
                    if (seconds !== 1){secondsD += 's';}
                    if (minutes !== 1){minutesD += 's';}
                    if (hours   !== 1){hoursD   += 's';}
                    if (days    !== 1){daysD    += 's';}
  
                    // padding the numbers 
                    return [
                        pad(days, 2)    + daysD,
                        pad(hours, 2)   + hoursD,
                        pad(minutes, 2) + minutesD,
                        pad(seconds, 2) + secondsD
                    ].join(', ');
                };
function pad(n, width, z) {
  z = z || '0';
  n = n + '';
  return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n;
}

@import url('https://fonts.googleapis.com/css?family=Ubuntu');
html {
  background: #305e8e;
  color: #fff;
  text-align: center;
  font-family: 'Ubuntu', sans-serif;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="timerApp">
    <div ng-controller="timerController">
      <h1>Hurry up! Deal ends in:</h1>
        <h2>{{time | timeleft}}</h2>
    </div>
</div>

您可以使用$interval来更新时间。

还有一个例子，展示了如何使用AngularJS实现时钟。

您可以在应用程序中使用$timeout依赖项，并在控制器中创建一个函数-

  var counter = 120; // 2 minutes 
  var customTimeout = $timeout($scope.onTimeout, 1000); // starting the timeout
  // Timeout Function 
  $scope.onTimeout = function() {
  counter--;
  $scope.timer = parseInt(counter / 60) ? parseInt(counter / 60) : "00" ; 
  if((counter % 60) < 10){
    $scope.timer += ":"+ ( (counter % 60) ? "0"+(counter % 60) : "00" ) ;
  }
  else{
    $scope.timer += ":"+ ( (counter % 60) ? (counter % 60) : "00" ) ; 
  }
  $scope.timer += " minutes"
  if (counter === 0) {
    $scope.stop();
  }
}
// Stop FUnction
$scope.stop = function(customTimeout) {
  $timeout.cancel();
}