Точно такой же таймер обратного отсчета чч: мм: сс для всех

Я использую угловой для сайта аукциона, вычисляя оставшееся время от времени окончания аукциона, используя момент и показывая счетчик, но он не работает, когда пользователь меняет свое время.

Получить точное время с сервера и рассчитать оставшееся время - это хорошо, но после загрузки страницы возникают проблемы с часами, есть ли способ получить событие изменения системных часов или проверить, настроил ли пользователь автоматическую синхронизацию / время в Интернете?

При получении оставшегося времени от сервера также учитывайте задержку ответа сети и некоторые другие вопросы. Необходимо знать, как лучше показать одинаковый таймер для всех.

Всего 1 ответ


Вы можете попробовать подписаться на фокус документа, а затем получить сервер dateTime. После нахождения разницы между датой клиента и значением.

  inc: number = 0;
  timeInitial = 0;
  time;
  toogle: boolean = false;
  constructor(private timerService: TimerService) {}
  click() {
    this.toogle = !this.toogle;
    if (this.toogle) {
      fromEvent(document, "focus")
        .pipe(
          takeWhile(() => this.toogle),
          startWith(null),
          switchMap(() => {
            return this.timerService.getTime();
          })
        )
        .subscribe(res => {
          this.inc = new Date().getTime() - res.time;
          if (!this.timeInitial) this.timeInitial = res.timeInitial;
          console.log(this.inc, this.timeInitial);
        });

      timer(0, 1000)
        .pipe(
          takeWhile(() => this.toogle),
          map(() => {
            return (
              this.timeInitial -
              new Date(new Date().getTime() - this.inc).getTime()
            );
          })
        )
        .subscribe(res => {
          this.time = res;
        });
    } else {
      this.timeInitial = 0;
    }
  }

Ваш .html как

<button (click)="click()">{{toogle?'stop':'start'}}</button>
{{time |date:'H:mm:ss':'UTC'}}

И наш сервис, который делает звонок на сервер, который дает нам время, например

export class TimerService {
  constructor(private httpClient: HttpClient) {}
  getTime() {
    return this.httpClient
      .get("https://worldtimeapi.org/api/timezone/America/Argentina/Salta")
      .pipe(
        map((res: any) => {
          const time = new Date(res.datetime).getTime();
          return {
            time: time,
            timeInitial: time + 30 * 60 * 1000
          };
        })
      );
  }
}

Что ж, если вы измените время на своем компьютере, вы увидите, что обратный отсчет изменился, но когда вы сфокусировались на приложении, обратный отсчет обратного отсчета даст вам правильное время

Вы можете увидеть в stackblitz


Есть идеи?

10000