每个人都完全相同的倒计时计时器 hh:mm:ss答案

【问题标题】：Exact same count down timer hh:mm:ss for everyone每个人都完全相同的倒计时计时器 hh:mm:ss
【发布时间】：2020-05-24 18:51:13
【问题描述】：

我在拍卖网站上使用角度，使用时刻和显示计数器计算拍卖结束时间的剩余时间，但是当用户更改他的时钟时间时它会失败。

从服务器获取准确时间并计算剩余时间很好，但是在页面加载后，干扰时钟创建问题，有没有办法获取系统时钟更改事件或检查用户是否设置了自动同步/互联网时间？

虽然从服务器获取剩余时间还包括网络响应延迟和其他一些问题需要知道向所有人显示完全相同的计时器的最佳方式。

【问题讨论】：

我实际上会让时钟保持原样，并允许用户根据需要对其进行处理（这只是他们知道他们还剩下多长时间的资源）。执行来自服务器；如果他们出价，则需要转到服务器，服务器应验证出价是否在时限内。
我也做了同样的事情，所有的强制执行都在服务器端完成，但仍然不想让用户操纵提供的信息
太棒了！虽然听起来您依赖服务器端的用户信息，但暂时您应该使用服务器的时钟。所以不要从 http 请求中获取出价时间，这就是我的意思。
基本上不依赖用户信息，也尝试通过获取服务器时间一次并计算本地时间和服务器时间之间的差异然后在计时器中调整来使用服务器时钟，唯一的问题是页面加载后时钟变化。
我使用 JavaScript 服务器端，它有内置的时间功能。如果您在服务器和客户端上使用 UTC 进行所有计算，那会有所帮助。除此之外，我希望有人对您的问题提出实际答案。但我的经验告诉我，没有一个:(

标签： angular countdowntimer angular-moment

【解决方案1】：

您可以尝试订阅文档焦点，然后从服务器获取日期时间。找到客户的日期和价值的不同之后。有些喜欢

  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看到

【讨论】：