javascript - 如何计算 Angular 中网页中文本框花费的总时间？

Question

我有一个网页。我有 2 个文本框。

我想计算点击页面末尾的提交按钮时在每个框上花费的总时间。

clickInside() {
    this.text = 'clicked inside';
      this.wasInside = true;
      this.activeTime.activeStartDate();
  }

@HostListener('document:click')
clickout() {
  if (!this.wasInside) {
     this.text = 'clicked outside';
   }
   this.wasInside = false;
     this.activeTime.activeEndDate();
   }

Answer 1

我创建了一个小 POC 来管理您的请求。您可以编写一个非常简单的指令来在您想要跟踪所花费时间的每个输入中实现。

import { Directive, HostListener } from '@angular/core';

@Directive({
  selector: '[calcTime]'
})
export class CalcTimeDirective {
  private timeSpentMs: number = 0;
  private lastDate: Date;
  constructor() { }

  @HostListener('focus') onFocus(){
    this.lastDate = new Date();
  }

  @HostListener('blur') onBlur(){
    this.timeSpentMs += (new Date() as any) - (this.lastDate as any);
  }

  public reset(){
    this.timeSpentMs = 0;
  }

  public getTime(){
    return this.timeSpentMs;
  }

  public getTimeSeconds(){
    return this.timeSpentMs / 1000;
  }
}

您可以通过一个简单的示例找到代码 here 。希望对您有帮助。