番茄鍾時鐘帆布戒指未註冊

Question

大家晚上好。我在使用這段代碼時遇到了一些麻煩，並且已經停留了幾個小時。如果你看看this.drawArc的構造函數，然後在原型中，我已經在控制檯上登錄了一些東西。你可以看到this.count記錄一個值，但是this.drawArc沒有。顯然，this.minutes和this.toSeconds工作，或者定時器不會啓動，但爲什麼drawArc不會註冊這些值我將它放置在構造函數中之前（狀態環）工作，但由於某種原因，它不再註冊任何值。我附上了一個小提琴。

注意：這是不完整的 - 如果您想要在輸入字段中輸入新值，您現在必須重新運行。一旦輸入值（按鈕上方的小圓圈），您可以將鼠標懸停在畫布上（較大的圓圈）查看倒計時。懸停的原因在於那些不想看到時鐘的人，而只喜歡狀態環的視覺效果。有任何想法嗎？？？我被困了幾個小時。謝謝你在前進
https://jsfiddle.net/asthewaterfalls/szn0mch1/9/

function Pomodoro(userInput) { 
    this.minutes = userInput; 
    this.toSeconds = 60 * this.minutes;//seconds - actual 
    this.cout = this.toSeconds; //for timer 
    this.seconds = 0; //display 
    this.count = 0; //for status ring 
    this.circleStart = Math.PI * 1.5; 
    this.drawArc = (2/this.toSeconds) * this.count; 
} 

Pomodoro.prototype.statusRing = function() { 
    if(this.count <= this.toSeconds) { 
     dom.canv.beginPath(); 
     dom.canv.arc(125, 125, 121, this.circleStart, Math.PI * (1.5 + this.drawArc), false); 
     dom.canv.stroke(); 
     this.count++; 
     console.log(this.count, this.drawArc); 
     const timeout = setTimeout(() => this.statusRing(), 1000); 
    } 
}; 

Answer 1

我看了一下你的小提琴。隨着兩個小小的變化，我全天候都會把一些動畫放入藍色的環中。我沒有檢查比例或安赫爾。

我做drawArg功能，與當前值作爲參數，this.toSeconds爲最大值計算：

this.drawArc = function(arg){ return (2/this.toSeconds) * arg; }; 

其次，我在dom.conv.arc() calld功能：

dom.canv.arc(/*...*/, Math.PI * (1.5 + this.drawArc(this.count)), /*...*/); 

下面是完整的例如：

function Pomodoro(userInput) { 
    this.minutes = userInput; 
    this.toSeconds = 60 * this.minutes;//seconds - actual 
    this.cout = this.toSeconds; //for timer 
    this.seconds = 0; //display 
    this.count = 0; //for status ring 
    this.circleStart = Math.PI * 1.5; 
    this.drawArc = function(arg){ return (2/this.toSeconds) * arg; }; 
} 

Pomodoro.prototype.statusRing = function() { 
    if(this.count <= this.toSeconds) { 
     dom.canv.beginPath(); 
     dom.canv.arc(125, 125, 121, this.circleStart, Math.PI * (1.5 + this.drawArc(this.count)), false); 
     dom.canv.stroke(); 
     this.count++; 
     console.log(this.count, this.drawArc); 
     const timeout = setTimeout(() => this.statusRing(), 1000); 

    } 
}; 

請讓我知道，如果這有幫助;）