发表新帖
发表新帖

angularjs make a simple countdown

后端 未结
关注
10 1518
别跟我提以往
别跟我提以往 2020-12-12 19:26

I would like make a countDown with Angular js. this is my code:

Html File

 {{countDown}} 

        

                      

              相关标签:
10条回答
  • 梦谈多话
    2020-12-12 19:55 
    function timerCtrl ($scope,$interval) {
    $scope.seconds = 0;
    var timer = $interval(function(){
        $scope.seconds++;
        $scope.$apply();
        console.log($scope.countDown);
    }, 1000);
}
    0 讨论(0)
  • 既然无缘
    2020-12-12 19:57

    The way I did , it works!

    • *angular version 1.5.8 and above.

    Angular code

    var app = angular.module('counter', []);

app.controller('MainCtrl', function($scope, $interval) {
  var decreamentCountdown = function() {
    $scope.countdown -= 1;
    if ($scope.countdown < 1) {
      $scope.message = "timed out";
    }
  };
  var startCountDown = function() {
    $interval(decreamentCountdown, 1000, $scope.countdown)
  };
  $scope.countdown = 100;
  startCountDown();
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.10/angular.min.js"></script>



<body ng-app="counter" ng-controller="MainCtrl">
  {{countdown}} {{message}}
</body>

    0 讨论(0)
  • 一整个雨季
    2020-12-12 19:59 
    $scope.countDown = 30;
var timer;
$scope.countTimer = function () {
    var time = $timeout(function () {
         timer = setInterval(function () {
             if ($scope.countDown > 0) {
                 $scope.countDown--;
            } else {
                clearInterval(timer);
                $window.location.href = '/Logoff';
            }
            $scope.$apply();
        }, 1000);
    }, 0);
}

$scope.stop= function () {
    clearInterval(timer);
    
}

    IN HTML:

    <button type="submit" ng-click="countTimer()">Start</button>
<button type="submit" ng-click="stop()">Clear</button>
    0 讨论(0)
  • 天涯浪人
    2020-12-12 20:00

    Please take a look at this example here. It is a simple example of a count up! Which I think you could easily modify to create a count down.

    http://jsfiddle.net/ganarajpr/LQGE2/

    JavaScript code:

    function AlbumCtrl($scope,$timeout) {
    $scope.counter = 0;
    $scope.onTimeout = function(){
        $scope.counter++;
        mytimeout = $timeout($scope.onTimeout,1000);
    }
    var mytimeout = $timeout($scope.onTimeout,1000);

    $scope.stop = function(){
        $timeout.cancel(mytimeout);
    }
}

    HTML markup:

    <!doctype html>
<html ng-app>
<head>
    <script src="http://code.angularjs.org/angular-1.0.0rc11.min.js"></script>
    <script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
</head>
<body>
<div ng-controller="AlbumCtrl">
    {{counter}}
    <button ng-click="stop()">Stop</button>    
</div>
</body>
</html>
    0 讨论(0)
 看不清?
提交回复
热议问题