web-dev-qa-db-fra.com

Comment faire une horloge à retardement (heure) en AngularJS et HTML

Je suis un utilisateur AngularJS/html débutant qui a essayé de trouver un extrait de code pour créer un élément d'horloge/heure pour une application Web.

Une recherche sur le Web n'a pas fourni de résultats simples aussi facilement que je m'y attendais pour quelque chose d'aussi trivial, j'ai donc pensé publier cette question pour obtenir des réponses et faciliter la recherche pour les autres.

J'ai publié ma solution mais je veux voir s'il y a quelque chose de plus agréable avant de choisir une réponse!

htmlangularjstimeclock
32
rex

Cela fonctionne très bien pour moi et je pense que c'est facile à suivre pour les noobs. Voyez-le en action ici

JavaScript: 

function TimeCtrl($scope, $timeout) {
    $scope.clock = "loading clock..."; // initialise the time variable
    $scope.tickInterval = 1000 //ms

    var tick = function() {
        $scope.clock = Date.now() // get the current time
        $timeout(tick, $scope.tickInterval); // reset the timer
    }

    // Start the timer
    $timeout(tick, $scope.tickInterval);
}

HTML: 

<div ng-controller='TimeCtrl'>
    <p>{{ clock  | date:'medium'}}</p>
</div>

N'oubliez pas d'inclure angularJS et la "ng-app" dans votre balise body.

38
rex

J'essaie juste d'améliorer la réponse d'Armen. Vous pouvez utiliser le $interval service pour configurer une minuterie.

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

module.controller('TimeCtrl', function($scope, $interval) {
  var tick = function() {
    $scope.clock = Date.now();
  }
  tick();
  $interval(tick, 1000);
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.11/angular.min.js"></script>

<div ng-app="myApp">
  <div ng-controller='TimeCtrl'>
    <p>{{ clock | date:'HH:mm:ss'}}</p>
  </div>
</div>
53
rustyx

J'ai créé une petite directive pour afficher une horloge numérique. La fonction d'invocation automatique est nécessaire car il y aurait un délai d'une seconde lors du rendu de l'horloge.

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

app.directive("digitalClock", function($timeout, dateFilter) {
  return {
    restrict: 'E',
    link: function(scope, iElement) {
      (function updateClock() {
        iElement.text(dateFilter(new Date(), 'H:mm:ss'));
        $timeout(updateClock, 1000);
      })();
    }
  };
});
<!DOCTYPE html>
<html ng-app="clock">

<head>
  <meta charset="utf-8" />
  <title>Digital clock</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>

<body>
  <h1 class="text-center">Digital Clock</h1>
<digital-clock></digital-clock>
</body>

</html>
2
Smaïl Hammour

C'est la réponse la plus simple que j'ai pu trouver en utilisant $ interval :

Exemple

Le JS 

function TimeCtrl($interval) {
     var timeController = this;

     timeController.clock = { time: "", interval: 1000 };

     $interval(function () { 
         timeController.clock.time = Date.now();}, 
         timeController.clock.interval);
}

Le HTML 

<div ng-controller='TimeCtrl as timeCtrl'>
    <p>{{ timeCtrl.clock.time | date:'medium'}}</p>
</div>

Voici une implémentation de temporisateur utilisant la même fonction d'enregistrement $ interval pour enregistrer un nouvel intervalle au démarrage et annuler l'intervalle à l'arrêt.

AVERTISSEMENT! Il n'est pas possible de se lier au paramètre $ interval delay

Exemple

Le JS 

function TimeCtrl($interval) {

    var timeController = this;

    timeController.clock = { time: "", interval: 1000 };

    timeController.timer = { time: (new Date()).setHours(0,0,0,0), startTime: "", interval: 10};

    timeController.timerProcess;

    timeController.timerStart = function() {
      // Register the interval and hold on to the interval promise
      timeController.timerProcess = RegisterInterval(TimerTick, timeController.timer.interval);
      // Reset the time to 0
      timeController.timerReset();
    }

    timeController.timerReset = function() {
      timeController.timer.startTime = Date.now();
      timeController.timer.time = (new Date()).setHours(0,0,0,0); 
    }

    timeController.timerStop = function() {
        // If there is an interval process then stop it
        if(timeController.timerProcess){
        $interval.cancel(timeController.timerProcess);
      }
    }

    function ClockTick() { 
        timeController.clock.time = Date.now();
    }

    function TimerTick(){
      // Increment the time by the time difference now and the timer start time
      timeController.timer.time += Date.now() - timeController.timer.startTime;
      // Reset the start time
      timeController.timer.startTime = Date.now();
    }

    function RegisterInterval(regFunction, regInterval){
      return $interval(regFunction, regInterval);
    } 

    RegisterInterval(ClockTick, timeController.clock.interval);
}

Le HTML 

<div ng-controller='TimeCtrl as timeCtrl'>
    <p>Date: {{ timeCtrl.clock.time | date:'medium'}}</p>
     <p>Timer: {{ timeCtrl.timer.time | date:'mm:ss:sss'}}</p>
     <button type="button" ng-click="timeCtrl.timerStart()">Start</button>
     <button type="button" ng-click="timeCtrl.timerReset()">Reset</button>
     <button type="button" ng-click="timeCtrl.timerStop()">Stop</button>
</div>
2
Wilmer Saint
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $interval) {
    $scope.theTime = new Date().toLocaleTimeString();
    $interval(function () {
        $scope.theTime = new Date().toLocaleTimeString();
    }, 1000);
});
1
viparvez

Il y a un exemple de comment y parvenir en utilisant l'intervalle des documents Angular. Vous pouvez également l'essayer dans plunker.

Voici le code:

Javascript: 

<script>
  angular.module('intervalExample', [])
    .controller('ExampleController', ['$scope', '$interval',
      function($scope, $interval) {
        $scope.format = 'M/d/yy h:mm:ss a';
        $scope.blood_1 = 100;
        $scope.blood_2 = 120;

        var stop;
        $scope.fight = function() {
          // Don't start a new fight if we are already fighting
          if ( angular.isDefined(stop) ) return;

          stop = $interval(function() {
            if ($scope.blood_1 > 0 && $scope.blood_2 > 0) {
              $scope.blood_1 = $scope.blood_1 - 3;
              $scope.blood_2 = $scope.blood_2 - 4;
            } else {
              $scope.stopFight();
            }
          }, 100);
        };

        $scope.stopFight = function() {
          if (angular.isDefined(stop)) {
            $interval.cancel(stop);
            stop = undefined;
          }
        };

        $scope.resetFight = function() {
          $scope.blood_1 = 100;
          $scope.blood_2 = 120;
        };

        $scope.$on('$destroy', function() {
          // Make sure that the interval is destroyed too
          $scope.stopFight();
        });
      }])
    // Register the 'myCurrentTime' directive factory method.
    // We inject $interval and dateFilter service since the factory method is DI.
    .directive('myCurrentTime', ['$interval', 'dateFilter',
      function($interval, dateFilter) {
        // return the directive link function. (compile function not needed)
        return function(scope, element, attrs) {
          var format,  // date format
              stopTime; // so that we can cancel the time updates

          // used to update the UI
          function updateTime() {
            element.text(dateFilter(new Date(), format));
          }

          // watch the expression, and update the UI on change.
          scope.$watch(attrs.myCurrentTime, function(value) {
            format = value;
            updateTime();
          });

          stopTime = $interval(updateTime, 1000);

          // listen on DOM destroy (removal) event, and cancel the next UI update
          // to prevent updating time after the DOM element was removed.
          element.on('$destroy', function() {
            $interval.cancel(stopTime);
          });
        }
      }]);
</script>

[~ # ~] html [~ # ~] 

<div>
  <div ng-controller="ExampleController">
    <label>Date format: <input ng-model="format"></label> <hr/>
    Current time is: <span my-current-time="format"></span>
    <hr/>
    Blood 1 : <font color='red'>{{blood_1}}</font>
    Blood 2 : <font color='red'>{{blood_2}}</font>
    <button type="button" data-ng-click="fight()">Fight</button>
    <button type="button" data-ng-click="stopFight()">StopFight</button>
    <button type="button" data-ng-click="resetFight()">resetFight</button>
  </div>
</div>

Voici le résultat: enter image description here

1
Nick

Vous pouvez utiliser ce code. C'est plus simple.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app="clockApp">
    <head>
        <script src="../angular.js"></script>
    </head>
    <body>
        <h1> Clock App </h1>
        <div ng-controller="MainCtrl">
            <p> The current time is : {{timeString}}</p>
        </div>

        <script>
          var module = angular.module("clockApp", []);
          module.controller("MainCtrl", TimeCtrl);     

                    function TimeCtrl($scope){
                         var currentDate = new Date();
                        $scope.timeString = currentDate.toTimeString();                        
                    }
       </script>
    </body>
</html>
0
Marquise Mery