Question

我是新的角度js。我正在尝试使用角度js进行倒计时。我的代码是

$scope.endingdays = function(datevalue){
    var endingin=new Date(datevalue);
    var date1=new Date();
    var date1_ms = Math.round(date1.getTime());
    var date2_ms = Math.round(endingin.getTime());
    var miliseconds = date2_ms - date1_ms;
    var second = miliseconds / 1000 ;
    var seconds = Math.floor(second) %60;
    var minutes =  Math.floor(second/60) % 60;
    var hours = Math.floor(second/3600);    
    result = hours<10 ? '0'+hours+':' : hours+':';      
    result += minutes<10 ? '0'+minutes+':' : minutes+':';
    result += seconds<10 ? '0'+seconds : seconds;
    return result;
};

这是我的新代码在这里，除了countdown.ow我自动进行倒计时一切都很好吗？现在重新加载页面显示倒计时。我的打印代码

{{endingdays(deal.endDate)}}

我正在使用角度js 1.2.23

Answer 1

你的代码就像。如果您正在返回上面提到的值，则可以使用此选项。 **

在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;
   }

};

Answer 2

您将使用$ filter和$ interval指令意味着确保在您的页面上显示计时器。定时器显示代码 Demo

Answer 3

使用$ 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>

Answer 4

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

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

Answer 5

您可以在应用中使用$ 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();
}

使用角度js的时间倒计时

5 个答案: