0

Estoy tratando de crear un cronómetro que dure dos horas y cuando llegue a cero se reinicie, pero no tengo ni idea de cómo hacerlo, esto es lo que llevo:

Componente TS

import { Component, OnInit } from '@angular/core';
import { timer } from 'rxjs';

@Component({
  selector: 'app-mantenimiento',
  templateUrl: './mantenimiento.component.html',
  styleUrls: ['./mantenimiento.component.css']
})
export class MantenimientoComponent implements OnInit {
  _second = 1000;
  _minute = this._second * 60;
  _hour = this._minute * 60;
  _day = this._hour * 24;
  end: any;
  now: any;
  day: any;
  hours: any;
  minutes: any;
  seconds: any;
  source = timer(0, 1000);
  clock: any;
  constructor(){}
  ngOnInit(){
    
    this.clock = this.source.subscribe(t => {
      this.now = new Date();
      this.now.setSeconds(3600) ;
      this.end = new Date();
      this.showDate();
    });
    
  }
  showDate(){
    let distance = this.end - this.now;
    this.day = Math.floor(distance / this._day);
    this.hours = Math.floor((distance % this._day) / this._hour);
    this.minutes = Math.floor((distance % this._hour) / this._minute);
    this.seconds = Math.floor((distance % this._minute) / this._second);
  }

}

Código en HTML:

<section>
    <div class="coming-soon">
        <div class="time-countdown">
            <ul>
                {{hours}} horas
                {{minutes}} minutos
                {{seconds}} segundos
            </ul>
        </div>
    </div>
</section>

Por ahora solo he conseguido este resultado:

Números negativos y cuenta regresiva negativa

De momento solo se comporta con numeros negativos y una cuenta regresiva negativa muy extraña, necesitaria que al time.now agregarle 1 hora y así restar el tiempo actual más una hora menos el tiempo final pero aún no sé como realizarlo, agradezco su colaboración

1 respuesta 1

1

Es bastante sencillo al usar una biblioteca como date-fns.

La explicación va en comentarios.

import { Component } from '@angular/core';
import { interval, Subscription } from 'rxjs';
import { add } from 'date-fns';
import { takeWhile } from 'rxjs/operators';
@Component({
  selector: 'my-app',
  template: `{{date | date:'HH \\'Horas\\' mm \\'minutos\\' ss \\'segundos\\''}}`,
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  date: Date;
  subscription$: Subscription;

  constructor() {
    this.counter();
  }

  private counter() {
    // fecha cualquiera inicializada con dos horas
    this.date = new Date('2000-01-01 02:00:00');
    // contador de las veces que el interval debe emitir
    let segundosEnDosHoras = 2 * 60 * 60;
    // interval que emite cada segundo
    this.subscription$ = interval(1000)
      // tomar un valor mientras aun queden segundos en la cuenta
      .pipe(takeWhile(() => segundosEnDosHoras-- > 0))
      .subscribe({
        // restar un segundo a la fecha actual
        next: () => (this.date = add(this.date, { seconds: -1 })),
        // cuando la cuenta termine reiniciar el contador
        complete: () => this.counter(),
      });
  }

  ngOnDestroy() {
    if (this.subscription$) {
      this.subscription$.unsubscribe();
    }
  }
}
1
  • Me ha funcionado bien en cuestión del contador, pero cuando actualizo la página se reinicia, quisiera que no pasara eso. Mi objetivo es crear un botón el cual se active cada 2 horas Commented el 15 jul. 2022 a las 13:25

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.