angular8 倒计时

最新推荐文章于 2024-09-02 09:24:33 发布

Null_Bugs

最新推荐文章于 2024-09-02 09:24:33 发布

阅读量927

点赞数

分类专栏： angular8

本文链接：https://blog.csdn.net/Null_Bugs/article/details/101270688

版权

本文介绍如何在Angular8中实现一个倒计时组件，通过示例代码和项目链接提供详细步骤。

摘要由CSDN通过智能技术生成

component

import { Component, OnInit, Input } from '@angular/core';
import { Observable, interval } from 'rxjs';
import {takeWhile, map, tap } from 'rxjs/operators';

@Component({
  selector: 'app-count-down',
  templateUrl: './count-down.component.html',
  styleUrls: ['./count-down.component.css']
})
export class CountDownComponent implements OnInit {
  @Input() startDate :Date;
  @Input() endDate : Date;
  private _MS_PER_SECOND = 1000;
  countDown$: Observable<string>;
  constructor() { }
  ngOnInit() {
    this.countDown$ = this.getCountDownObservable(this.startDate , this.endDate)
  }
  private getCountDownObservable(startDate:Date,endDate:Date){
    return interval(1000).pipe(
      map(elapse => this.diffInSec(startDate,endDate) - elapse),
      takeWhile(gap => gap >= 0),
      map(sec => ({
        day:Math.floor(sec / 3600 /24),
        hour