Question

大家好我正在研究一个使用时间很多的项目所以我正在使用时刻js但我无法处理它我不知道为什么我在网站上工作就像toggl.com当然我用angular2写了结构，这是我的代码 - ＆gt;这个app.component.html保存输入字段和计时器以及启动和停止计时器按钮

<div class="container-fluid">
 <div class="row wrapper">
  <div class="col-lg-8 col-md-8 col-sm-9 first">
   <input type="text" class="form-control title" placeholder="{{placeholder}}" #task>
  </div>
 <div class="col-lg-4 col-md-4 col-sm-3 second hiddden">
  <div class="row">
    <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
      <input type="text" class="form-control" value="00:00:00" (click)="showdiv()" [(ngModel)]="timer" #time>
    </div>
    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 font">
      <i class="fa fa-play-circle fa-3x first" aria-hidden="true" *ngIf="play" (click)="startPause()"></i>
      <i class="fa fa-stop-circle fa-3x second" aria-hidden="true" *ngIf="pause" (click)="startPlay(task.value, time.value)"></i>
    </div>
  </div>
  <div class="row hidden_one">
    <div class="start-end" *ngIf="show">
      <div class="col-lg-6">
        <div class="form-group">
          <label for="Start">Start</label><br>
          <input type="text" class="form-control" class="startTime" value="{{startTime}}" #val (blur)="validate(val.value)">
        </div>
      </div>
      <div class="col-lg-6">
        <div class="form-group">
          <label for="Start">Stop</label><br>
          <input type="text" class="form-control" class="startTime" [(ngModel)]="stopTime" [disabled]="pause">
        </div>
      </div>
    </div>
  </div>
 </div>
</div>

 <times-list [tasksList]="tasks"></times-list>

正如你在下面的图片中看到的，当我点击输入计时器时，有一个div开始 - ＆gt;当我点击播放按钮时触发，当点击停止按钮时触发停止，或者当我专注于计时器时，它就是我的app-component.ts

import { Component } from '@angular/core';
import { timeInterface } from './timeInterface';
import { timesList } from './times-list-component';
import * as moment from 'moment';

@Component({
 selector: 'my-app',
 templateUrl: './html/app-component.html',
 styleUrls: ['./css/app-component.css']
})

export class AppComponent  { 
  placeholder:string = "What are you working on?";
  play:boolean = true;
  pause:boolean = false;
  show:boolean=false;// For Showing The Hidden Div
  countup:any;
  timeSum :any;
  timer:string = "00:00:00";
  // hidden Div Start Time
  startTime: any;
  stopTime: any;
  bs:any;
  bbs:any;
  // Array to Hold The Tasks With Time
  tasks:timeInterface[] =[];

  startPause() {
   this.bs = moment();
   this.startTime = this.bs.format('LT');
   this.play = false;
   this.pause = true;
   let sec= 0;
   let min = 0;
   let hour = 0;
   this.countup = setInterval(() => {
    if(sec === 59) {
      min++;
      sec = 0;
    }else if(min > 59) {
      hour++;
      min = 0;
    }else {
      sec++;
    }
   this.timer = `${this.pad(hour)}:${this.pad(min)}:${this.pad(sec)}`;
  }, 1000);

}

startPlay(name:string, time:any) {
  this.play = true;
  this.pause = false;
  this.timer = "00:00:00";
  clearInterval(this.countup);
  //push the task to array
  if(name == "") {
   // this.placeholder = "(no description)";
    name = "Add description";
    this.tasks.push({title: name, time: time});
    console.log(this.tasks);
  } else {
    name = name;
    this.tasks.push({title: name, time: time});
  }

}

pad(num:number, size:number=2): string { // to add zero before sec if it < 10
  var s = num+"";
  while (s.length < size) s = "0" + s;
  return s;
}
//Show the hidden div
showdiv() {
  this.bbs = moment();
  this.show = true;
  this.stopTime = this.bbs.format('LT');
  if(!this.pause) {
    this.startTime = this.stopTime
  }
}
// Validate input value
validate(val:string) {
  let temp =this.startTime;
  let x = temp;
  this.startTime = moment(val, "LT", true).isValid() ? val : this.startTime;
  if(moment(this.startTime).isSame(this.stopTime)) {
    console.log("true");
  }else {
    console.log("false");

  }
 }
}

所以我有疑问 1 /当在开始输入上发生蓝色事件时，有一个函数第1次

validate(val:string) {
  let temp =this.startTime;
  let x = temp;
  this.startTime = moment(val, "LT", true).isValid() ? val : this.startTime;
}

这个函数检查字段之后的字段的值，如果像这样的值4:01 AM不是4：1 AM，因为我使用LT它用它替换原始值，否则它返回原始值它是什么首先，我在else语句中不起作用，并且还用新的值替换原始值 2 /在toggl.com中如果我删除了起始值和Am || PM并写了它计算的任何数字并检查数字是否>是否停止值或甚至在它之前计算2个值之间的差异并用以下值替换计时器：如果开始输入值是：1：10 pm，停止值是1:10 pm，我删除了起始值，即下午1:10，我只写了2，它需要它作为下午2:00，并计算差异，这是50分钟它需要它作为0:50:00并用它替换计时器我怎么能这样做以及为什么2采取这种格式2:00为什么它是PM不是我 3 /如何添加两次，如：00：01：20 + 00:00:20 = 00:01:40 我怎么能用时刻js提前感谢

角度为2 js的力矩js增加了时间

0 个答案: