Question

尝试使用角度js创建倒计时演示。

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

如何实施倒计时器。

这就是我的尝试。

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

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

Answer 2

简单地试试这个

<强> Working Demo

<强> 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);
}

如何显示angularjs的倒计时

2 个答案: