Cómo hacer un reloj (hora) en AngularJS y HTML

Nuestro grupo redactor ha estado mucho tiempo buscando para darle respuesta a tu interrogante, te brindamos la solución por esto deseamos servirte de mucha ayuda.

Solución:

Solo trato de mejorar la respuesta de Armen. Puedes usar el $interval servicio para configurar un temporizador.

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

module.controller('TimeCtrl', function($scope, $interval) 
  var tick = function() 
    $scope.clock = Date.now();
  
  tick();
  $interval(tick, 1000);
);

  

    
 clock 





  

Esto funciona bastante bien para mí y creo que es fácil de seguir para los novatos. Véalo en acción aquí

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:

    
 date:'medium'

No olvide incluir angularJS y la ‘ng-app’ en su etiqueta de cuerpo.

Esta es la respuesta más simple que se me ocurrió usando $intervalo:

Ejemplo

el js

function TimeCtrl($interval) 
     var timeController = this;

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

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

el html

    
 timeCtrl.clock.time 

---

Aquí hay una implementación de temporizador que usa la misma función de registro de $intervalo para registrar un nuevo intervalo al inicio y cancelar el intervalo al detenerse.

¡ADVERTENCIA! No es posible enlazar con el parámetro de retraso de $interval

Ejemplo

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

el html

    
Date:  date:'medium'
     
Timer:  date:'mm:ss:sss'
     Start
     Reset
     Stop

Aquí tienes las reseñas y valoraciones

Si conservas alguna incertidumbre y disposición de ascender nuestro sección puedes escribir una aclaración y con deseo lo observaremos.

---

---

Utiliza Nuestro Buscador