anglejs machen einen einfachen Countdown

Lesezeit: 6 Minuten

Ich möchte mit Angular js einen CountDown machen. das ist mein Code:

HTML-Datei

<div ng-app ng-controller = "countController"> {{countDown}} <div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

js-Datei

function countController($scope){
    $scope.countDown = 10;    
    var timer = setInterval(function(){$scope.countDown--; console.log($scope.countDown)},1000);  
}​​

in console.log funktioniert es. Ich habe einen Countdown, aber in {{countdown}} wird er nicht aktualisiert. Könnten Sie mir bitte helfen? Danke!

Benutzer-Avatar
Ganaraj

Bitte sehen Sie sich dieses Beispiel hier an. Es ist ein einfaches Beispiel für ein Hochzählen! Was Sie meiner Meinung nach leicht ändern könnten, um einen Countdown zu erstellen.

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>

  • Hier ist eine Modifikation, die einen Countdown durchführt: jsfiddle.net/dpeaep/LQGE2/1

    – Daniel

    21. August 2012 um 15:03 Uhr

  • gut, ich habe verwendet $Intervall statt $timeout

    – Andrés

    14. Oktober 2014 um 18:23 Uhr

  • Wie würdest du die Uhr anhalten?

    – CodyBugstein

    7. Juni 2015 um 5:47 Uhr

  • Stimme @Andres zu – ich glaube, $interval ist der richtige Weg. Dies ist die Antwort, die ich schließlich für eine Angularjs-Timer-Implementierung verwendet habe.

    – Jaycer

    20. Dezember 2016 um 14:50 Uhr

Benutzer-Avatar
jpfreire

Ab Version 1.3 gibt es einen Dienst im Modul ng: $interval

function countController($scope, $interval){
    $scope.countDown = 10;    
    $interval(function(){console.log($scope.countDown--)},1000,0);
}​​

Mit Vorsicht verwenden:

Hinweis: Von diesem Dienst erstellte Intervalle müssen explizit zerstört werden, wenn Sie damit fertig sind. Insbesondere werden sie nicht automatisch zerstört, wenn der Geltungsbereich eines Controllers oder das Element einer Anweisung zerstört werden. Dies sollten Sie berücksichtigen und darauf achten, das Intervall immer zum passenden Zeitpunkt abzubrechen. Im folgenden Beispiel finden Sie weitere Einzelheiten dazu, wie und wann dies zu tun ist.

Aus: Die offizielle Dokumentation von Angular.

Du solltest benutzen $scope.$apply() wenn Sie einen eckigen Ausdruck von außerhalb des eckigen Frameworks ausführen.

function countController($scope){
    $scope.countDown = 10;    
    var timer = setInterval(function(){
        $scope.countDown--;
        $scope.$apply();
        console.log($scope.countDown);
    }, 1000);  
}

http://jsfiddle.net/andreev_artem/48Fm2/

  • Die direkte Verwendung von setTimeOut oder setInterval ist in Angular keine gute Praxis. Sie sollten den Dienst $timeout verwenden.

    – Ganaraj

    21. August 2012 um 10:10 Uhr

  • @ganaraj Es kommt auf die Aufgabe an. Praktikabilität schlägt Reinheit.

    – Artjom Andrejew

    21. August 2012 um 17:35 Uhr

  • Es gibt den $timeout-Dienst in AngularJS, der $apply automatisch aufruft.

    – pkozlowski.opensource

    21. August 2012 um 21:04 Uhr

  • @pkozlowski.opensource Danke, du hast nichts Neues gesagt. Ich kann Antworten und Kommentare lesen 🙂 Ich denke, dass es gut ist, zwei Antworten zu haben. Einer erklärt, warum Code nicht funktioniert und wie Sie ihn zum Laufen bringen können. Und eine andere, die erklärt, wie es eckiger gemacht werden könnte.

    – Artjom Andrejew

    22. August 2012 um 6:00 Uhr

  • Deine Antwort ist viel besser. Sie verwenden ein Intervall, das für einen Zähler viel besser geeignet ist.

    – Typ mograbi

    7. April 2013 um 6:12 Uhr

Benutzer-Avatar
Shaheen

Ich habe die Antwort von Mr. Ganaraj aktualisiert, um die Stopp- und Wiederaufnahmefunktion anzuzeigen, und einen eckigen js-Filter hinzugefügt, um den Countdown-Timer zu formatieren

es ist hier auf jsFiddle

Controller-Code

'use strict';
var myApp = angular.module('myApp', []);
myApp.controller('AlbumCtrl', function($scope,$timeout) {
    $scope.counter = 0;
    $scope.stopped = false;
    $scope.buttonText="Stop";
    $scope.onTimeout = function(){
        $scope.counter++;
        mytimeout = $timeout($scope.onTimeout,1000);
    }
    var mytimeout = $timeout($scope.onTimeout,1000);
    $scope.takeAction = function(){
        if(!$scope.stopped){
            $timeout.cancel(mytimeout);
            $scope.buttonText="Resume";
        }
        else
        {
            mytimeout = $timeout($scope.onTimeout,1000);
            $scope.buttonText="Stop";
        }
            $scope.stopped=!$scope.stopped;
    }   
});

Filtercode angepasst von RobG aus stackoverflow

myApp.filter('formatTimer', function() {
  return function(input)
    {
        function z(n) {return (n<10? '0' : '') + n;}
        var seconds = input % 60;
        var minutes = Math.floor(input / 60);
        var hours = Math.floor(minutes / 60);
        return (z(hours) +':'+z(minutes)+':'+z(seconds));
    };
});

Es könnte helfen, “Wie schreibe ich den Code für die Countdown-Uhr in AngularJS”

Schritt 1: HTML-Code-Beispiel

<div ng-app ng-controller="ExampleCtrl">
    <div ng-show="countDown_text > 0">Your password is expired in 180 Seconds.</div>
    <div ng-show="countDown_text > 0">Seconds left {{countDown_text}}</div>
    <div ng-show="countDown_text == 0">Your password is expired!.</div>
</div>

Schritt 2: Das Codebeispiel von AngulaJs

function ExampleCtrl($scope, $timeout) {
  var countDowner, countDown = 10;
  countDowner = function() {
    if (countDown < 0) {
      $("#warning").fadeOut(2000);
      countDown = 0;
      return; // quit
    } else {
      $scope.countDown_text = countDown; // update scope
      countDown--; // -1
      $timeout(countDowner, 1000); // loop it again
    }
  };

  $scope.countDown_text = countDown;
  countDowner()
}

Das vollständige Beispiel für die Countdown-Uhr in AngularJs ist unten angegeben.

<!DOCTYPE html>
<html>

<head>
  <title>AngularJS Example - Single Timer Example</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
  <script>
    function ExampleCtrl($scope, $timeout) {
      var countDowner, countDown = 10;
      countDowner = function() {
        if (countDown < 0) {
          $("#warning").fadeOut(2000);
          countDown = 0;
          return; // quit
        } else {
          $scope.countDown_text = countDown; // update scope
          countDown--; // -1
          $timeout(countDowner, 1000); // loop it again
        }
      };

      $scope.countDown_text = countDown;
      countDowner()
    }
  </script>
</head>

<body>
  <div ng-app ng-controller="ExampleCtrl">
    <div ng-show="countDown_text > 0">Your password is expired in 180 Seconds.</div>
    <div ng-show="countDown_text > 0">Seconds left {{countDown_text}}</div>
    <div ng-show="countDown_text == 0">Your password is expired!.</div>
  </div>
</body>

</html>

Benutzer-Avatar
Nircraft

Wahrscheinlich haben Sie Ihr Modul nicht richtig deklariert oder Sie haben die Funktion vor der Deklaration des Moduls platziert (eine sichere Regel ist, das Winkelmodul nach dem Hauptteil zu platzieren, sobald die gesamte Seite geladen ist). Da Sie anglejs verwenden, sollten Sie verwenden $Intervall (Angularjs-Äquivalenz zu setInterval, einem Windows-Dienst).

Hier ist eine funktionierende Lösung:

angular.module('count', [])
  .controller('countController', function($scope, $interval) {
    $scope.countDown = 10;
    $interval(function() {
      console.log($scope.countDown--);
    }, 1000, $scope.countDown);
  });
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.1/angular.min.js"></script>


<body>
  <div ng-app="count" ng-controller="countController"> {{countDown}} </div>
</body>

Hinweis: Es stoppt bei 0 in der HTML-Ansicht, aber bei 1 in der console.log, können Sie herausfinden, warum? 😉

Benutzer-Avatar
marc_s

So wie ich es gemacht habe, funktioniert es!

  • *Angular-Version 1.5.8 und höher.

Winkelcode

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

app.controller('MainCtrl', function($scope, $interval) {
  var decrementCountdown = function() {
    $scope.countdown -= 1;
    if ($scope.countdown < 1) {
      $scope.message = "timed out";
    }
  };
  var startCountDown = function() {
    $interval(decrementCountdown, 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>

1257120cookie-checkanglejs machen einen einfachen Countdown

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy