我的秒表有两个问题。
在代码中,有一个类包含几个方法,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
2条答案
按热度按时间xam8gpfp1#
currentWatch
函数似乎返回了一个数组。在
start
函数中,使用从currentWatch
返回的值创建一个新的Number
。Number仅接受单个输入。
也许,可以将您的
start
方法重构为如下形式46qrfjad2#
你必须像这样设置start中数组的变量:
因为
currentWatch()
返回一个数组。当然,还有其他方法可以做到这一点,但这一种可能最接近您的原始代码。