每个人都使用完全相同的倒计时 hh:mm:ss
Exact same count down timer hh:mm:ss for everyone
我正在使用 angular 拍卖网站,使用时刻计算拍卖结束时间的剩余时间并显示计数器,但是当用户更改他的时钟时间时失败。
从服务器获取准确时间并计算剩余时间很好,但在页面加载后,干扰时钟会产生问题,有没有办法获取系统时钟更改事件或检查用户是否设置了自动同步/互联网时间?
虽然从服务器获取剩余时间还包括网络响应延迟和一些其他问题
需要知道为每个人显示完全相同的计时器的最佳方式。
您可以尝试订阅文档焦点,然后从服务器获取日期时间。找到客户日期与 value.Some 之间的差异后
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
中看到
我正在使用 angular 拍卖网站,使用时刻计算拍卖结束时间的剩余时间并显示计数器,但是当用户更改他的时钟时间时失败。
从服务器获取准确时间并计算剩余时间很好,但在页面加载后,干扰时钟会产生问题,有没有办法获取系统时钟更改事件或检查用户是否设置了自动同步/互联网时间?
虽然从服务器获取剩余时间还包括网络响应延迟和一些其他问题 需要知道为每个人显示完全相同的计时器的最佳方式。
您可以尝试订阅文档焦点,然后从服务器获取日期时间。找到客户日期与 value.Some 之间的差异后
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
中看到