如何在AngularJS中显示倒计时

Question

尝试使用AngularJS创建倒计时演示。

一旦处于空闲状态30秒钟，我需要显示从10到0的倒计时，

如何实现倒计时计时器。

这是我尝试过的方法。

var time = $timeout(function () {
            $rootScope.$broadcast('shutdwon');
                setTimeout( function () {
                    $location.path('/');
                }, 1500);
        }, 30000);

- user1853128

Answer 1

我曾经做过这样的事情来展示会话超时信息。

请查看以下示例代码，可以根据您的要求进行改进和使用。

function MyCtrl($scope,$timeout) {
       $scope.isUserActive = false;
        $scope.userActivityInterval = 1000;
        $scope.redirectLoginInterval =10000;
        $scope.timerSpan=  $scope.redirectLoginInterval/  $scope.userActivityInterval;
      $scope.resetActivity=function () {
            if ($scope.isUserActive == true) {


                clearTimeout($scope.redirectTimer);
                $scope.redirectTimer = $timeout( $scope.redirectToLogin, $scope.redirectLoginInterval);

                $scope.timerSpan = $scope.redirectLoginInterval/  $scope.userActivityInterval;
            }
            else {
                $scope.timerSpan -= $scope.userActivityInterval / $scope.userActivityInterval;
            }

            clearTimeout($scope.activityTimer);
            $scope.activityTimer = $timeout($scope.resetActivity, $scope.userActivityInterval);

            $scope.isUserActive = false;
        };   

  $scope.activityTimer = $timeout($scope.resetActivity, $scope.userActivityInterval);
        $scope.redirectTimer = $timeout($scope.resetActivity, $scope.redirectLoginInterval);

}

Demo

- Seminda

Answer 2

这很简单，试试这个：

演示链接

HTML

<div ng-app ng-controller="countController">Count starts after 30 seconds<div>Count :: {{countDown}}</div>
<div>

脚本

function countController($scope, $timeout) {
    $scope.countDown = 10;
    var time = $timeout(function () {
        var timer = setInterval(function () {
            if ($scope.countDown > 0) {
                $scope.countDown--;
            } else {
                clearInterval(timer)
            }
            $scope.$apply();
        }, 1500);
    }, 30000);
}

- Nidhish Krishnan