用typescript完成倒计时
时间: 2024-05-14 17:14:11 浏览: 19
这里提供一个简单的 TypeScript 倒计时示例:
```typescript
class CountdownTimer {
private readonly targetDate: Date;
private readonly timerElement: HTMLElement;
constructor(targetDate: Date, timerElementId: string) {
this.targetDate = targetDate;
this.timerElement = document.getElementById(timerElementId);
}
start(): void {
this.updateTimerElement();
setInterval(() => {
this.updateTimerElement();
}, 1000);
}
private updateTimerElement(): void {
const now = new Date();
const timeDiff = this.targetDate.getTime() - now.getTime();
if (timeDiff <= 0) {
this.timerElement.textContent = "Time's up!";
} else {
const days = Math.floor(timeDiff / (1000 * 60 * 60 * 24));
const hours = Math.floor((timeDiff / (1000 * 60 * 60)) % 24);
const minutes = Math.floor((timeDiff / (1000 * 60)) % 60);
const seconds = Math.floor((timeDiff / 1000) % 60);
const daysStr = this.formatNumber(days);
const hoursStr = this.formatNumber(hours);
const minutesStr = this.formatNumber(minutes);
const secondsStr = this.formatNumber(seconds);
this.timerElement.textContent = `${daysStr}:${hoursStr}:${minutesStr}:${secondsStr}`;
}
}
private formatNumber(num: number): string {
return num < 10 ? `0${num}` : `${num}`;
}
}
const targetDate = new Date("2022-01-01T00:00:00Z");
const timer = new CountdownTimer(targetDate, "countdown-timer");
timer.start();
```
这个示例使用了一个名为 `CountdownTimer` 的类来管理倒计时。它接受一个 `targetDate` 参数来表示倒计时的目标日期时间,并接受一个 `timerElementId` 参数来表示倒计时时钟的 HTML 元素 ID。它有一个 `start` 方法来启动倒计时,并使用 `setInterval` 函数每秒更新一次时钟。它还有一个名为 `updateTimerElement` 的私有方法来更新时钟 HTML 元素的内容,以及一个名为 `formatNumber` 的私有方法来在数字前添加前导零以便于显示。
在示例的末尾,我们创建了一个新的 `CountdownTimer` 实例,并使用 `start` 方法启动了倒计时。HTML 元素 ID 为 `countdown-timer` 的元素将被用于显示时钟。
相关推荐
![ts](https://img-home.csdnimg.cn/images/20210720083646.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![exe](https://img-home.csdnimg.cn/images/20210720083343.png)
![mp4](https://img-home.csdnimg.cn/images/20210720083504.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)