javascript TS中的秒表返回NaN

vhmi4jdf  于 2023-01-29  发布在  Java
关注(0)|答案(2)|浏览(299)

我的秒表有两个问题。
在代码中,有一个类包含几个方法,currentWatch类应该返回时间(毫秒、秒、分钟)。
1.第一个是有一个毫秒NaN,我不知道如何修复它。
1.而第二个我想当我点击开始(停止后)从继续那。
打印代码:

class StopWatch {
   private duration: number;
   private status: string;
   private currentTime: any;
   private domRef: HTMLElement | null;
   private interval: any;
   private milliSecond: number;
   private second:number;
   private minute: number;

   constructor(wrapper: string) {
      this.duration = 0;
      this.milliSecond = 0;
      this.second = 0;
      this.minute = 0;

      this.domRef = document.getElementById(wrapper);
      this.status = 'stopped';
      
      if (!this.domRef) throw new Error('Does not exist');
      this.render();
   }

   private render() {
         this.domRef!.append(
            createBtn('start', () => this.start()),
            createBtn('stop', () => this.stop()),
            createBtn('reset', () => this.reset()),
         )
   }

   private start() {
      if(this.status === 'started') throw new Error('already started');
      this.currentTime = Date.now();
      this.status = 'started';

      const p = document.createElement("p");
      p.id = "p";
      document.body.appendChild(p);

      this.interval =  setInterval(() => {
         this.minute, this.second, this.milliSecond  = Number(this.currentWatch());
         document.getElementById("p")!.innerHTML =  `${this.minute} : ${this.second} : ${this.milliSecond}`;
      }, 100);
   }

   private currentWatch() {
      this.duration = Date.now() - this.currentTime;

      if(this.status === 'stopped') this.stop();

      let minutes = Math.floor(this.duration / (1000 * 60));
      let seconds = Math.floor((this.duration % (1000 * 60)) / 1000);
      let milliSeconds = Math.floor(this.duration % 1000);

      this.minute = minutes;
      this.second = seconds;
      this.milliSecond = milliSeconds;
      
      return [this.minute, this.second, this.milliSecond];
   }

   stop() {
      clearInterval(this.interval);
      if(this.status === 'stopped') throw new Error('already stopped');

      this.duration = Date.now() - this.currentTime + this.duration;

      this.status = 'stopped';

      return this.duration;
   }

   reset(){
      if(this.status === 'started') this.stop();
      this.duration = 0;
      document.getElementById("p")!.innerHTML = this.duration.toString();
   }
}

function createBtn(name: string, listener: () => void) {
   const startBtn = document.createElement('button');
   startBtn.innerText = name;
   startBtn.addEventListener('click', listener);
   return startBtn;
}

(function() {
   const btns = document.getElementsByClassName('add-btn');
   btns[0].addEventListener('click', () => {
      new StopWatch(btns[0].getAttribute('data-idw') as string);
   });
})();

我把编译后的代码的TypeScript显示的结果。
x一个一个一个一个x一个一个二个x

xam8gpfp

xam8gpfp1#

currentWatch函数似乎返回了一个数组。
start函数中,使用从currentWatch返回的值创建一个新的Number
Number仅接受单个输入。
也许,可以将您的start方法重构为如下形式

this.interval =  setInterval(() => {
         this.currentWatch();
         document.getElementById("p")!.innerHTML =  `${this.minute} : ${this.second} : ${this.milliSecond}`;
      }, 100);
46qrfjad

46qrfjad2#

你必须像这样设置start中数组的变量:

[_this.minute, _this.second, _this.milliSecond] = _this.currentWatch();

因为currentWatch()返回一个数组。
当然,还有其他方法可以做到这一点,但这一种可能最接近您的原始代码。

相关问题