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()中对该函数进行了校对：

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 );

    }
};

如果有帮助，请告诉我。）

番茄钟时钟帆布戒指没有注册

1 个答案: