问在angular 6中创建秒表
EN

Stack Overflow用户

提问于 2019-03-04 11:47:47

回答 4查看 6.6K关注 0票数 1

我使用的是angular。我想实现秒表。我有一个由一个或多个对象组成的列表。我有一个开始计时器和每个项目的结束计时器按钮。当我点击start按钮时，这应该会启动特定项目的计时器&当我点击end timer按钮时，这应该会暂停计时器，以便我可以重新开始计时。但一次只能运行一个计时器。如果项目A计时器已启动&如果单击项目B的启动计时器按钮，则应暂停前一个计时器并启动项目B的新计时器。

allUserTaskArr = [
    {
      'name': 'abc',
     'id':1,
     'start': true,
     'end': false
    },
     {
      'name': 'xyz',
     'id':1,
     'start': true,
     'end': false
    }

  ];
 
 startTask (item) {
    if(item.start) {
      item.end =  true;
      item.start= false;
    } 
  }

  EndTask (item) {
    if(item.end) {
      item.end =  false;
      item.start= true;
    }
  }

<div class="row no-gutters">
  <div class="card width hr" *ngFor="let item of allUserTaskArr">
    <div class="card-header">
      {{item.due | date}}
    </div>
    <div class="card-body pad-125">
      <div class="row no-gutters">
        <div class="col-md-12">
          {{item.name}}
          <div class="float-right">
            <button class="btn btn-info mar-l-r-0-5" *ngIf="item.start" (click)="startTask(item)">Start Timer</button>
            <button class="btn btn-danger mar-l-r-0-5" *ngIf="item.end" (click)="EndTask(item)">End Timer</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

typescript

angular-timer

javascript

jquery

angular

回答 4

Stack Overflow用户

发布于 2019-03-04 12:37:20

您将需要创建一个计时器，它是您可以订阅的可观察对象。在回调中执行操作。例如：

在组件中：

import { timer } from "rxjs";

ngOnInit() {
    timer(0, 1000).subscribe(ellapsedCycles => {
      if(this.isRunning) {
        this.time--;
      }
    });
  }

toggleTimer() {
    this.isRunning = !this.isRunning;
  }

在模板中：

<button (click)="toggleTimer()">Toggle timer</button>
<div>{{ time }}</div>

票数 2

Stack Overflow用户

发布于 2019-08-19 09:35:53

创建一个每秒增长的计时器，然后将时间转换为显示格式

   timer(0, 1000).subscribe(ec => {
          this.time++;
          this.timerDisplay = this.getDisplayTimer(this.time);
        });

getDisplayTimer(time: number) {
    const hours = '0' + Math.floor(time / 3600);
    const minutes = '0' + Math.floor(time % 3600 / 60);
    const seconds = '0' + Math.floor(time % 3600 % 60);

    return {
      hours: { digit1: hours.slice(-2, -1), digit2: hours.slice(-1) },
      minutes: { digit1: minutes.slice(-2, -1), digit2: minutes.slice(-1) },
      seconds: { digit1: seconds.slice(-2, -1), digit2: seconds.slice(-1) },
    };
  }`

票数 1

Stack Overflow用户

发布于 2019-03-04 12:34:26

您正在启动和结束同一个计时器，因为您传递了foreach循环的当前item。因此，您可以更改同一项/计时器的属性。

要解决这个问题，您需要找到当前正在运行的项/计时器，因此对于startTask方法，请执行以下操作：

startTask (item) {
   // Find current running timer
   var runningTimer = this.allUserTaskArr.find(ti => ti.start === true);
   // Stop this timer
   runningTimer.start = false;
   runningTimer.end = false;

   // Start the timer you pressed
   item.start = true;
}