2017-08-22 2 views
1

Hallo, ich arbeite an einer Aufgabe, die Moment js verwendet, also was ich tun möchte, ist ein Zähler, der min, sec und Stunden zählen wie der toggl.com Zähler Ich habe ein Eingabefeld namens Start und ein anderes Ende genannt ich möchte das Ende von Start subtrahieren und den Zählerwert damit ersetzen und dann den Zähler von dem aktuellen Wert für den Zähler fortsetzen 0:00:10 und start is: 01:15 PM und end is : 01:30 PM Ich möchte den Start von dem Ende subtrahieren, die ist Ergebnis der Wert 00:15 Dieser Wert ersetzt den aktuellen Wert des Zählers, der 0:00:10 bis 0:15:00 ist dann starten Sie den Zähler von diesem Wert und fügen Sie Sekunden als normalen Zähler 0:15:01 und so weiter überprüfen Sie bitte toggl.com zu verstehen, was ich meine 2/ich will, wenn ich den Wert der Startwert auf eine beliebige Anzahl wie 10 geändert und wenn die Zeit PM ist es als 10 PM betrachten nicht 10 AM Mein Code hier kann das nichtMoment js Zähler

validate(val:string) { 
    let temp =this.startTime; 
    let parsedTime = moment(val, "hh:mm A"); 
    if(parsedTime.isValid()) { 
    this.startTime = parsedTime.format('hh:mm A') 
    } else { 
    this.startTime = "temp"; 
    console.log("no"); 
    } 
    } 

wo die val der eingegebene Wert in der Start-Eingabefeld auch ich möchte, wenn ich ein unerwartetes Format eingegeben es ersetzt es durch die vorherige gültige Zeit nicht temp string ich versuchte this.startTime = this.StartTime aber es funktioniert nicht ich will die Validierung sieht wie toggl.com bitte besuchen Sie es enter image description here

und thi s ist mein Gegen Code mit meiner eigenen Arbeit für einige erwarte ich nicht, dass dies das gewünschte ein für dieses Verhalten

startPause() {// when click on play button 
this.bs = moment(); 
this.startTime = this.bs.format('hh:mm A'); 
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); 

} 

Antwort

0
App.directive("timerup", function(Util,$interval,$timeout){ 
    return { 
    scope: { start: '=' }, 
    require: "?ngModel", 
    //template: "<input type='text' readonly class='form-control' ng-model='value' > ", 
    link: function(scope, element, attrs, ngModel){ 

     if (!ngModel) return; 

     ngModel.$render = function(){ 
      scope.value = ngModel.$modelValue; 
     }; 

     var timeout = 0; 
     $interval(function() { 
      if((scope.start)){ 
       //factory('Util', [function() { 
       return element.text(Util.dhms(Math.floor((new Date().getTime() - scope.start.getTime())/ 1000))); 
      } 
     }, 1000); 

     function onTimeout() { 
      //timeout = timeout +1; 
      timeout++; 
     } 
    } 
    }; 
}); 
App.factory('Util', [function() { 
    return { 
     dhms: function (t) { 
      var days, hours, minutes, seconds; 
      days = Math.floor(t/86400); 
      t -= days * 86400; 
      hours = Math.floor(t/3600) % 24; 
      t -= hours * 3600; 
      minutes = Math.floor(t/60) % 60; 
      t -= minutes * 60; 
      seconds = t % 60; 
      return [ 
       (days)? days + 'd': '', 
       (hours)? hours + 'h':'', 
       minutes + 'm', 
       seconds + 's' 
      ].join(' '); 
     } 
    }; 
}]); 

<span timerup ng-model="model" start="start"</span> 

start = Anfangsdatum