如何在angular js中显示倒计时

How to show the count down in angular js

本文关键字：显示 倒计时 js angular      更新时间：2023-09-26

尝试使用angular js创建一个倒计时演示。

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

如何实现倒计时定时器。

这就是我尝试过的。

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

它的简单尝试

工作演示

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

我做了这样的事情来显示会话超时信息。

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

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

}

演示

相关文章：