Question

我制作了一个简单的倒计时器，但是当我在文本框中输入0：0：0时，计时器进入负-1：59：59。我试图输入0：0：1并且计时器停在0：0：0并且消息框出现在屏幕上

我已尝试使用此代码来防止负值，但它停在-1：59：58

嘿我的计时器会出现负值，请查看代码并帮助我。

Countdown.ts

import {Component, Input, Output, EventEmitter} from '@angular/core';

@Component({
 // moduleId: module.id,
   selector: 'count-down',
   templateUrl: 'countdown.html',
   styleUrls: ['countdown.scss']
})

export class CountDown {
      @Input() units: any;
      @Input() end: any;
      @Input() displayString = '';
      @Input() text: any;
      @Input() divider: any;
      @Output() reached: EventEmitter<Date> = new EventEmitter();
      display: any = [];
      displayNumbers: any = [];

     private wasReached = false;

   constructor() {
      setInterval(() => this._displayString(), 100);
    }

   _displayString() {

   if (typeof this.units === 'string') {
       this.units = this.units.split('|');
    }

    const givenDate: any = new Date(this.end);
    const now: any = new Date();

    const dateDifference: any = givenDate - now;

    if (dateDifference < 100 && dateDifference > 0 && !this.wasReached) {
      this.wasReached = true;
      this.reached.next(now);
    }

   if (dateDifference <= 0) {
       this.reached.emit();
       clearInterval(this.reached);
    }

   let lastUnit = this.units[this.units.length - 1],
   unitConstantForMillisecs = {
       year: (((1000 * 60 * 60 * 24 * 7) * 4) * 12),
       month: ((1000 * 60 * 60 * 24 * 7) * 4),
       weeks: (1000 * 60 * 60 * 24 * 7),
       days: (1000 * 60 * 60 * 24),
       hours: (1000 * 60 * 60),
       minutes: (1000 * 60),
       seconds: 1000
  },
 unitsLeft = {},
 returnText = '',
 returnNumbers = '',
 totalMillisecsLeft = dateDifference,
 i,
 unit: any;
 for (i in this.units) {
     if (this.units.hasOwnProperty(i)) {

       unit = this.units[i].trim();
if (unitConstantForMillisecs[unit.toLowerCase()] === false) {
  //$interval.cancel(countDownInterval);
  throw new Error('Cannot repeat unit: ' + unit);

}
if (unitConstantForMillisecs.hasOwnProperty(unit.toLowerCase()) === 
false) {
  throw new Error('Unit: ' + unit + ' is not supported. Please use 
  following units: year, month, weeks, days, hours, minutes, seconds, 
   milliseconds');
}

unitsLeft[unit] = totalMillisecsLeft / unitConstantForMillisecs[unit.toLowerCase()];

if (lastUnit === unit) {
  unitsLeft[unit] = Math.ceil(unitsLeft[unit]);
} else {
  unitsLeft[unit] = Math.floor(unitsLeft[unit]);
}
totalMillisecsLeft -= unitsLeft[unit] * 
unitConstantForMillisecs[unit.toLowerCase()];
unitConstantForMillisecs[unit.toLowerCase()] = false;

returnNumbers += ' ' + unitsLeft[unit] + ' | ';
returnText += ' ' + unit;
}
}

 if (this.text === null || !this.text) {
  this.text = {
  Year: 'Year',
  Month: 'Month',
  Weeks: 'Weeks',
  Days: 'Days',
  Hours: 'Hours',
  Minutes: 'Minutes',
  Seconds: 'Seconds',
  MilliSeconds: 'Milliseconds'
};
}

this.displayString = returnText
  .replace('Year', this.text.Year + ' | ')
  .replace('Month', this.text.Month + ' | ')
  .replace('Weeks', this.text.Weeks + ' | ')
  .replace('Days', this.text.Days + ' | ')
  .replace('Hours', this.text.Hours + ' | ')
  .replace('Minutes', this.text.Minutes + ' | ')
  .replace('Seconds', this.text.Seconds);

 this.displayNumbers = returnNumbers.split('|');
 this.display = this.displayString.split('|');
}
}

我的Html代码 -

<div id="col-12 p-0 timer">
   <count-down [text]="text" units="Days | Hours | Minutes | Seconds " 
     end="2018-02-6">
   </count-down>
</div>

Answer 1

尝试使用

Math.abs参考here

使用此方法将返回数字的绝对值

示例：

Math.abs（-1）= 1
Math.abs（-5）= 5
Math.abs（5）= 5

如何防止计数器值在角度4中变为负值？

1 个答案: