Firefox中的控制台返回:
“未定义更新”
这仅适用于timer
的条件。我不明白为什么。
计时器中的第一个displayTimeLeft
有效,而其他计时器则无效。
import $ from 'jquery';
//circle start
let progressBar;
let indicator;
let pointer;
let length = Math.PI * 2 * 100;
//circle ends
let displayOutput;
let pauseBtn;
let intervalTimer;
let timeLeft;
let wholeTime = 0.5 * 60; // manage this to set the whole time
let isPaused = false;
let isStarted = false;
export default class Timer{
constructor(){
this.update = this.update.bind(this);
$(document).ready(function() {
progressBar = document.querySelector('.e-c-progress');
indicator = document.getElementById('e-indicator');
pointer = document.getElementById('e-pointer');
displayOutput = document.querySelector('.display-remain-time')
pauseBtn = document.getElementById('pause');
progressBar.style.strokeDasharray = length;
});
}
initTimer =() => {
this.update(wholeTime,wholeTime); //refreshes progress bar
this.displayTimeLeft(wholeTime);
pauseBtn.addEventListener('click',this.pauseTimer);
}
update = (value, timePercent) => {
var offset = - length - length * value / (timePercent);
progressBar.style.strokeDashoffset = offset;
pointer.style.transform = `rotate(${360 * value / (timePercent)}deg)`;
};
changeWholeTime = (seconds) => {
if ((wholeTime + seconds) > 0){
wholeTime += seconds;
this.update(wholeTime,wholeTime);
}
}
timer = (seconds) => { //counts time, takes seconds
let remainTime = Date.now() + (seconds * 1000);
this.displayTimeLeft(seconds);
//const {displayTimeLeft}=this.displayTimeLeft();
intervalTimer = setInterval(function(){
timeLeft = Math.round((remainTime - Date.now()) / 1000);
if(timeLeft < 0){
clearInterval(intervalTimer);
isStarted = false;
// this.displayTimeLeft(wholeTime);
// pauseBtn.classList.remove('pause');
// pauseBtn.classList.add('play');
return ;
}
this.displayTimeLeft(timeLeft);
}, 1000);
}
pauseTimer = (event) => {
if(isStarted === false){
this.timer(wholeTime);
isStarted = true;
// this.classList.remove('play');
// this.classList.add('pause');
}else if(isPaused){
// this.classList.remove('play');
// this.classList.add('pause');
// timer(timeLeft);
// isPaused = isPaused ? false : true
}else{
// this.classList.remove('pause');
// this.classList.add('play');
// clearInterval(intervalTimer);
// isPaused = isPaused ? false : true ;
}
}
displayTimeLeft = (timeLeft) => { //displays time on the input
let minutes = Math.floor(timeLeft / 60);
let seconds = timeLeft % 60;
let displayString = `${minutes < 10 ? '0' : ''}${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
displayOutput.textContent = displayString;
this.update(timeLeft, wholeTime);
}
}